/* Anfrage · „Skizzieren Sie Ihre Website“ (Mockup, Runde 2). Nur Tokens aus tokens.css, mobil zuerst.
   Links: eine Frage pro Schritt (Fortschritt, Frage-Karte, große Antwortkarten) bzw. am Ende Satz + Kontakt.
   Rechts (ab 1024 px mitlaufend, mobil oben angeheftet): Bühne mit Seitenstapel, Browser-Hülle (Skizze), Bauplan-Leiste.
   Offene Stellen warten als „?“ (gestrichelt); die Stelle der aktuellen Frage pulsiert dreimal und bleibt dann markiert
   (kein Dauer-Loop). Skizzen-Maße in cqi (wie die Beispiel-Website). Bewegung nur opacity/transform. */

.af-held { position: relative; z-index: var(--z-content); padding: calc(var(--kopf-h) + var(--space-32)) 0 var(--space-section-end); }
.af-raster {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-24);
  grid-template-areas: "kopf" "buehne" "werkzeug";
}
.af-kopf { grid-area: kopf; display: grid; gap: var(--space-16); justify-items: start; }
.af-h1 { font: var(--font-weight-display) var(--font-size-h1) / var(--leading-h1) var(--font-display); letter-spacing: var(--tracking-h1); text-wrap: balance; }
.af-kopf .lead { max-width: 46ch; }
.af-ohne-js { color: var(--color-text-secondary); }

/* ======================= Werkzeug ======================= */
.af-werkzeug { grid-area: werkzeug; display: grid; gap: var(--space-16); min-width: 0; align-content: start; }

.af-fortschritt { display: flex; gap: var(--space-4); }
.af-fortschritt i { flex: 1; height: var(--space-4); border-radius: var(--radius-pill); background: var(--color-line-strong); transform-origin: 0 50%; }
.af-fortschritt i.ist-voll { background: var(--color-accent); }
.af-fortschritt i.ist-jetzt { background: var(--color-accent-soft-a40); }

.af-frage-karte {
  display: grid; gap: var(--space-16); padding: var(--space-24); border-radius: var(--radius-card);
  background: var(--color-surface); box-shadow: var(--shadow-card-module);
}
.af-frage-karte[hidden] { display: none; }
.af-frage-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); min-height: var(--size-target-sm); }
.af-schritt { color: var(--color-accent-soft); }
.af-zurueck {
  display: inline-flex; align-items: center; gap: var(--space-6); min-height: var(--size-target-sm); padding: 0 var(--space-10);
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-text-tertiary); font: inherit; font-size: var(--font-size-small); cursor: pointer;
}
.af-zurueck svg { width: var(--size-icon-sm); height: var(--size-icon-sm); transform: scaleX(-1); }
.af-zurueck[hidden] { display: none; }
.af-zurueck:hover { color: var(--color-text); }
.af-zurueck:focus-visible { outline: var(--stroke-focus) solid var(--color-focus); outline-offset: var(--space-2); }
.af-frage { font: var(--font-weight-display) var(--font-size-h3) / var(--leading-h3) var(--font-display); letter-spacing: var(--tracking-h3); text-wrap: balance; outline: 0; }
.af-hinweis { margin-top: calc(-1 * var(--space-8)); font-size: var(--font-size-ui-sm); color: var(--color-text-tertiary); }
.af-hinweis[hidden] { display: none; }

/* Antwortkarten */
.af-optionen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
@media (min-width: 560px) { .af-optionen--viele { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.af-optionen--text { gap: var(--space-12); }
.af-option {
  position: relative; display: flex; align-items: center; gap: var(--space-14); min-height: var(--size-button); padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-control); background: var(--color-fill-option); box-shadow: var(--ring-option);
  color: var(--color-text-secondary); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), opacity var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.af-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.af-option-text { display: grid; gap: var(--space-2); }
.af-option-text b { font-size: var(--font-size-body); font-weight: var(--font-weight-medium); line-height: var(--leading-snug); color: var(--color-text); }
.af-option-text small { font-size: var(--font-size-caption); line-height: var(--leading-compact); color: var(--color-text-tertiary); }
.af-punkt { flex: none; display: grid; place-items: center; width: var(--size-radio); height: var(--size-radio); border-radius: var(--radius-round); box-shadow: var(--ring-radio); }
.af-option--mehr .af-punkt { border-radius: var(--radius-sm); }
.af-punkt::after { content: ""; width: var(--size-dot); height: var(--size-dot); border-radius: inherit; background: var(--color-accent); box-shadow: var(--glow-status); transform: scale(0); transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .af-option:hover { background: var(--color-fill-option-hover); transform: translateY(-1px); } }
.af-option:active { transform: translateY(1px); transition-duration: var(--dur-press); }
.af-option:has(input:checked) { background: var(--color-accent-a10); box-shadow: var(--ring-option-checked); }
.af-option:has(input:checked) .af-punkt { box-shadow: var(--ring-radio-checked); }
.af-option:has(input:checked) .af-punkt::after { transform: scale(1); }
a.af-option:focus-visible { outline: var(--stroke-focus) solid var(--color-focus); outline-offset: var(--space-2); }
.af-option:has(input:focus-visible) { outline: var(--stroke-focus) solid var(--color-focus); outline-offset: var(--space-2); }
.af-optionen.ist-gewaehlt .af-option:not(:has(input:checked)) { opacity: .35; }
.af-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12) var(--space-24); }
.af-fuss:empty { display: none; }
.af-skip { border: 0; padding: 0; background: none; font: inherit; font-size: var(--font-size-small); cursor: pointer; }

/* Budget-Hinweis */
.af-check {
  display: grid; gap: var(--space-12); padding: var(--space-20); border-radius: var(--radius-control);
  font-size: var(--font-size-ui-sm); line-height: var(--leading-body); color: var(--color-text-secondary);
  animation: af-auf var(--dur-reveal-short) var(--ease-out) both;
}
.af-check[hidden] { display: none; }
.af-check b { color: var(--color-text); font-weight: var(--font-weight-display); }
.af-check--knapp { background: var(--color-danger-a12); box-shadow: var(--ring-danger-soft); }
.af-check--ok { background: var(--color-accent-a10); box-shadow: var(--ring-panel-accent); }
.af-check-titel { display: flex; align-items: center; gap: var(--space-10); font: var(--font-weight-display) var(--font-size-body) / var(--leading-snug) var(--font-display); color: var(--color-text); }
.af-check-titel svg { flex: none; width: var(--size-icon); height: var(--size-icon); }
.af-check--knapp .af-check-titel svg { color: var(--color-danger); }
.af-check--ok .af-check-titel svg { color: var(--color-accent); }
.af-check-weg { padding-top: var(--space-8); border-top: 1px solid var(--color-line); }
.af-check-link { border: 0; padding: 0; background: none; font: inherit; color: var(--color-text); cursor: pointer; }
.af-check-posten { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.af-posten {
  display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--size-target-sm); padding: 0 var(--space-12);
  border: 0; border-radius: var(--radius-pill); background: var(--color-fill-option); box-shadow: var(--ring-option);
  font: inherit; color: var(--color-text); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out);
}
.af-posten small { color: var(--color-accent-soft); font-size: var(--font-size-caption); }
.af-posten:hover { background: var(--color-accent-a10); }
.af-posten:focus-visible { outline: var(--stroke-focus) solid var(--color-focus); outline-offset: var(--space-2); }
.af-check .btn { justify-self: start; }

/* Auftritt je Frage: Kopf, dann Karten gestaffelt */
.af-frage-karte.ist-neu .af-frage, .af-frage-karte.ist-neu .af-hinweis { animation: af-auf var(--dur-reveal-short) var(--ease-out) both; }
.af-frage-karte.ist-neu .af-option, .af-frage-karte.ist-neu .af-optionen--text { animation: af-auf var(--dur-reveal-short) var(--ease-out) both; animation-delay: calc(var(--motion-stagger-list) * (var(--i, 0) + 1)); }

/* Abschluss */
.af-abschluss { display: grid; gap: var(--space-32); scroll-margin-top: calc(var(--kopf-h) + var(--space-16)); animation: af-auf var(--dur-reveal) var(--ease-out) both; }
.af-abschluss[hidden] { display: none; }
.af-satz-karte { display: grid; gap: var(--space-12); padding: var(--space-24); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card-module); }
.af-satz-titel { color: var(--color-accent-soft); }
.af-satz { font: var(--font-weight-medium) var(--font-size-body-lg) / var(--leading-body) var(--font-display); color: var(--color-text); text-wrap: pretty; }
.af-extra { display: grid; gap: var(--space-6); padding-top: var(--space-12); border-top: 1px solid var(--color-line); font-size: var(--font-size-ui-sm); color: var(--color-text-secondary); }
.af-hp { position: absolute; left: -100vw; width: 1px; height: 1px; opacity: 0; }   /* Honeypot */
.af-danach[hidden], .af-formular [hidden] { display: none; }
.af-danach { animation: af-auf var(--dur-reveal) var(--ease-out) both; }
.af-aendern { justify-self: start; border: 0; padding: 0; background: none; font: inherit; font-size: var(--font-size-small); cursor: pointer; }
.af-formular { max-width: none; }
.af-felder { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
@media (min-width: 768px) { .af-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.af-senden { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-16) var(--space-24); }

/* ======================= Bühne ======================= */
.af-buehne { grid-area: buehne; display: grid; gap: var(--space-14); min-width: 0; align-content: start; }
.af-buehne-kopf { display: flex; justify-content: space-between; gap: var(--space-12); color: var(--color-text-tertiary); }
.af-buehne-kopf b { color: var(--color-text); font-weight: var(--font-weight-medium); }
[data-af-stand] { color: var(--color-accent-soft); font-variant-numeric: tabular-nums; }
.af-geraet-rahmen { position: relative; margin-top: var(--space-16); margin-right: var(--space-24); }
.af-skizze { z-index: var(--z-raised); }

/* Mobil: Bühne heftet sich unter die Kopfzeile, damit man beim Antworten zusieht */
@media (max-width: 1023.98px) {
  .af-buehne {
    position: sticky; top: var(--kopf-h); z-index: var(--z-raised); margin: 0 calc(-1 * var(--rand)); padding: var(--space-12) var(--rand) var(--space-14);
    background: var(--color-bg); box-shadow: 0 1px 0 var(--color-line);
  }
  .af-geraet-rahmen { margin-top: 0; margin-right: var(--space-12);
  }
  .af-buehne-kopf { display: none; }
  .af-held:has(.af-abschluss:not([hidden])) .af-buehne { position: relative; top: auto; }
}

/* Adresszeile: wartet als „?“ */
.af-skizze .url b { font-weight: var(--font-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-skizze .url.ist-offen b { color: var(--color-accent-soft); }
.af-skizze .url.ist-ziel { box-shadow: inset 0 0 0 1px var(--color-accent); animation: af-puls var(--dur-reveal-long) var(--ease-out) 3; }

/* Seitenstapel hinter dem Browser */
.af-stapel { position: absolute; inset: 0; pointer-events: none; }
.af-stapel i {
  position: absolute; inset: 0; border-radius: var(--radius-device); background: var(--color-surface-2); box-shadow: var(--ring-option);
  transform: translate(calc(var(--i) * var(--space-4)), calc(var(--i) * -1 * var(--space-3))); opacity: calc(1 - var(--i) * .12);
  animation: af-stapel var(--dur-reveal) var(--ease-out) both; animation-delay: calc(var(--i) * var(--motion-stagger-list));
}
.af-stapel-zahl {
  position: absolute; right: 0; top: calc(-1 * var(--space-48)); z-index: var(--z-label); padding: var(--space-4) var(--space-10);
  border-radius: var(--radius-pill); background: var(--color-accent-a10); box-shadow: var(--ring-badge); color: var(--color-accent-soft);
  animation: af-pop var(--dur-reveal-short) var(--ease-out) both;
}
@keyframes af-stapel { from { opacity: 0; transform: none; } }

/* Google-Vorschau, schwebt über der Ecke */
.af-google {
  position: absolute; right: calc(-1 * var(--space-16)); top: 24%; z-index: var(--z-device-overlay); width: min(46%, 17rem);
  display: grid; gap: var(--space-4); padding: var(--space-12) var(--space-14); border-radius: var(--radius-control);
  background: var(--color-app-bg); box-shadow: var(--shadow-app-card); font-size: var(--font-size-caption);
  animation: af-pop var(--dur-reveal) var(--ease-out) both;
}
.af-google[hidden] { display: none; }
@media (max-width: 767.98px) { .af-google { display: none; } }
.af-google .mono-3 { color: var(--color-text-tertiary); }
.af-google b { color: var(--color-accent-soft); font-weight: var(--font-weight-medium); }
.af-g-url { color: var(--color-success); }
.af-google i { display: block; height: var(--space-4); border-radius: var(--radius-pill); background: var(--color-line-strong); }
.af-google i + i { width: 70%; }

/* Referenz aus der Branche: echter Screenshot unter der Bauplan-Leiste */
.af-ref[hidden] { display: none; }
.af-ref.ist-neu { animation: af-auf var(--dur-reveal) var(--ease-out) both; }
.af-ref-link {
  display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); align-items: center; gap: var(--space-16); padding: var(--space-10);
  border-radius: var(--radius-control); text-decoration: none; background: var(--color-surface); box-shadow: var(--shadow-card); color: var(--color-text);
  transition: background-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .af-ref-link:hover { background: var(--color-surface-2); } }
.af-ref-link:focus-visible { outline: var(--stroke-focus) solid var(--color-focus); outline-offset: var(--space-2); }
.af-ref-bild { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-sm); box-shadow: var(--ring-option); }
.af-ref-bild img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.af-ref-text { display: grid; gap: var(--space-4); font-size: var(--font-size-ui-sm); line-height: var(--leading-compact); }
.af-ref-text small { color: var(--color-accent-soft); }
.af-ref-text b { font-weight: var(--font-weight-medium); }
.af-ref-text em { font-style: normal; color: var(--color-text-tertiary); font-size: var(--font-size-caption); }
@media (max-width: 1023.98px) { .af-ref { display: none; } }

/* Freigabe-Stempel am Ende (Bernstein nur hier: Freigabe) */
.af-fertig-stempel {
  position: absolute; left: 50%; top: 50%; z-index: var(--z-device-overlay); padding: var(--space-10) var(--space-20);
  border-radius: var(--radius-stamp); background: rgba(var(--color-bg-rgb), .88); box-shadow: var(--ring-stamp-warm), var(--shadow-card);
  color: var(--color-warm-soft); font: var(--font-weight-display) var(--font-size-body-lg) / 1 var(--font-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-6deg);
}
.af-fertig-stempel[hidden] { display: none; }
.af-fertig-stempel.ist-neu { animation: af-stempel var(--dur-reveal) var(--ease-out) both; }
@keyframes af-stempel { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-6deg) scale(1.6); } 60% { opacity: 1; transform: translate(-50%, -50%) rotate(-6deg) scale(.96); } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(-6deg) scale(1); } }

/* ---------- Skizze im Browser ---------- */
.af-vp {
  display: flex; flex-direction: column; gap: calc(100cqi / 64 * .9); padding: calc(100cqi / 64 * 1.2) calc(100cqi / 64 * 2);
  font: var(--font-weight-medium) calc(100cqi / 64 * .82) / 1.2 var(--font-text); color: var(--color-text-secondary);
}
.af-b {
  position: relative; display: flex; flex-direction: column; gap: calc(100cqi / 64 * .5); padding: calc(100cqi / 64 * 1) calc(100cqi / 64 * 1.2);
  border-radius: calc(100cqi / 64 * .7); background: var(--color-surface-2); box-shadow: var(--ring-option);
}
.af-b > i, .af-held-text > i { display: block; height: calc(100cqi / 64 * .5); width: 70%; border-radius: var(--radius-pill); background: var(--color-line-strong); }
.af-b > i:nth-of-type(2n), .af-held-text > i:nth-of-type(2n) { width: 48%; }
.af-etikett { display: inline-flex; align-items: center; gap: .45em; min-width: 0; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-etikett svg { width: 1.1em; height: 1.1em; flex: none; color: var(--color-accent-soft); }
.af-etikett--ci { color: var(--color-accent-soft); }
.af-knopf { display: block; width: 26%; height: calc(100cqi / 64 * 1.6); margin-top: calc(100cqi / 64 * .3); border-radius: calc(100cqi / 64 * .4); background: var(--color-accent); }

/* Platzhalter „?“ */
.af-geist {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .6em; min-height: calc(100cqi / 64 * 9);
  border-radius: calc(100cqi / 64 * .7); outline: 1px dashed var(--color-accent-a40); outline-offset: -1px; color: var(--color-text-tertiary);
}
.af-geist b { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: var(--radius-round); background: var(--color-accent-a10); color: var(--color-accent-soft); font: var(--font-weight-display) 1.2em / 1 var(--font-display); }
.af-geist--gross { font-size: calc(100cqi / 64 * 1.4); }
.af-geist.ist-ziel { outline-color: var(--color-accent); color: var(--color-text); }
.af-geist-mini {
  position: absolute; right: calc(100cqi / 64 * 1); top: calc(100cqi / 64 * 1); z-index: var(--z-label); display: inline-flex; align-items: center; gap: .4em;
  padding: .3em .6em .3em .3em; border-radius: var(--radius-pill); background: rgba(var(--color-bg-rgb), .9); outline: 1px dashed var(--color-accent); color: var(--color-text);
  animation: af-pop var(--dur-reveal-short) var(--ease-out) both;
}
.af-geist-mini b { display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: var(--radius-round); background: var(--color-accent); color: var(--color-on-accent); font-weight: var(--font-weight-display); }
.af-geist-mini--inline { position: static; align-self: flex-start; }

/* aktuelle Stelle: dreimal pulsieren, dann markiert bleiben */
.af-b.ist-ziel, .af-mods.ist-ziel, .af-geist.ist-ziel { position: relative; }
.af-b.ist-ziel, .af-mods.ist-ziel, .af-alt.ist-ziel { box-shadow: 0 0 0 1.5px var(--color-accent); }
.af-geist.ist-ziel, .af-b.ist-ziel, .af-mods.ist-ziel, .af-alt.ist-ziel { animation: af-puls var(--dur-reveal-long) var(--ease-out) 3; }
.af-vp.ist-ziel { box-shadow: inset 0 0 0 1.5px var(--color-accent); }
.af-mods.ist-ziel { border-radius: calc(100cqi / 64 * .7); }
@keyframes af-puls { 0% { opacity: 1; } 50% { opacity: .55; } 100% { opacity: 1; } }

/* Navigation */
.af-b--nav { flex-direction: row; align-items: center; justify-content: space-between; padding: calc(100cqi / 64 * .5) calc(100cqi / 64 * .6); background: transparent; box-shadow: none; }
.af-logo { width: calc(100cqi / 64 * 5); height: calc(100cqi / 64 * 1.1); border-radius: var(--radius-pill); background: var(--color-text-tertiary); }
.af-menue { display: flex; align-items: center; gap: calc(100cqi / 64 * .9); }
.af-menue i { display: block; width: calc(100cqi / 64 * 3); height: calc(100cqi / 64 * .5); border-radius: var(--radius-pill); background: var(--color-line-strong); animation: af-auf var(--dur-reveal-short) var(--ease-out) both; }
.af-menue i:nth-child(n) { animation-delay: calc(var(--motion-stagger-list) * 1); }
.af-menue--geist i { background: var(--color-line); }
.af-menue--geist b { color: var(--color-accent-soft); font-weight: var(--font-weight-display); }

/* Startbereich (mit Branchenbild) */
.af-b--held { flex: 1 0 auto; min-height: calc(100cqi / 64 * 17); justify-content: center; overflow: hidden; background: var(--color-surface-3); }
.af-b--held img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.af-b--held.hat-bild::before { content: ""; position: absolute; inset: 0; z-index: var(--z-raised); background: linear-gradient(90deg, rgba(var(--color-bg-rgb), .92) 0%, rgba(var(--color-bg-rgb), .7) 45%, rgba(var(--color-bg-rgb), 0) 80%); }
.af-held-text { position: relative; z-index: var(--z-label); display: flex; flex-direction: column; gap: calc(100cqi / 64 * .6); max-width: 58%; }
.af-titel { font: var(--font-weight-display) calc(100cqi / 64 * 2.1) / 1.08 var(--font-display); letter-spacing: var(--tracking-h3); color: var(--color-text); text-wrap: balance; }
.af-marke { align-self: flex-start; padding: .25em .6em; border-radius: var(--radius-pill); background: var(--color-accent-a10); box-shadow: var(--ring-badge); color: var(--color-accent-soft); font-size: .85em; }
.af-tueren { position: relative; z-index: var(--z-label); display: grid; grid-template-columns: 1fr 1fr; gap: calc(100cqi / 64 * .8); margin-top: calc(100cqi / 64 * .8); max-width: 70%; }
.af-tueren span {
  display: flex; align-items: center; justify-content: space-between; gap: .4em; padding: .7em .8em; border-radius: calc(100cqi / 64 * .5);
  background: rgba(var(--color-bg-rgb), .85); box-shadow: inset 0 0 0 1px var(--color-accent-a40); color: var(--color-text); font-weight: var(--font-weight-display);
}
.af-tueren svg { width: 1em; height: 1em; color: var(--color-accent-soft); }

/* Bausteine */
.af-mods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(100cqi / 64 * .9); }
.af-mods--eins { grid-template-columns: minmax(0, 1fr); }
.af-mods .af-geist { min-height: calc(100cqi / 64 * 7); }
.af-b--modul { min-height: calc(100cqi / 64 * 7); }
.af-b--modul em { position: absolute; right: calc(100cqi / 64 * .8); top: calc(100cqi / 64 * .8); padding: .1em .5em; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-on-accent); font-style: normal; font-weight: var(--font-weight-display); font-size: .8em; }
.af-kalender { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(100cqi / 64 * .3); }
.af-kalender i { display: block; height: calc(100cqi / 64 * 1); border-radius: calc(100cqi / 64 * .25); background: var(--color-line); }
.af-kalender i:nth-child(4), .af-kalender i:nth-child(7) { background: var(--color-accent-a40); }
.af-zahl { display: flex; flex-wrap: wrap; gap: calc(100cqi / 64 * .3); }
.af-zahl b { padding: .15em .5em; border-radius: var(--radius-pill); box-shadow: var(--ring-tag); font-weight: var(--font-weight-medium); font-size: .82em; color: var(--color-accent-soft); animation: af-pop var(--dur-reveal-short) var(--ease-out) both; }
.af-zahl b:nth-child(2) { animation-delay: var(--motion-stagger-list); }
.af-zahl b:nth-child(3) { animation-delay: calc(var(--motion-stagger-list) * 2); }
.af-zahl b:nth-child(4) { animation-delay: calc(var(--motion-stagger-list) * 3); }
.af-schritte { display: flex; gap: calc(100cqi / 64 * .3); }
.af-schritte i { flex: 1; height: calc(100cqi / 64 * .35); border-radius: var(--radius-pill); background: var(--color-line-strong); }
.af-schritte i.an { background: var(--color-accent); }
.af-feld { display: block; height: calc(100cqi / 64 * 1.3); border-radius: calc(100cqi / 64 * .3); background: var(--color-field-bg); box-shadow: var(--ring-option); }
.af-regler { position: relative; display: block; height: calc(100cqi / 64 * .4); margin: calc(100cqi / 64 * .6) 0; border-radius: var(--radius-pill); background: var(--color-line-strong); }
.af-regler i { position: absolute; top: 50%; left: 58%; width: calc(100cqi / 64 * 1.2); height: calc(100cqi / 64 * 1.2); border-radius: var(--radius-round); background: var(--color-accent); transform: translate(-50%, -50%); }
.af-betrag { font: var(--font-weight-display) calc(100cqi / 64 * 1.3) / 1 var(--font-display); color: var(--color-text); }
.af-akten, .af-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(100cqi / 64 * .4); }
.af-akten i { display: block; height: calc(100cqi / 64 * 1.1); border-radius: calc(100cqi / 64 * .25); background: var(--color-line); }
.af-akten { grid-template-columns: minmax(0, 1fr); }
.af-kacheln i { display: block; height: calc(100cqi / 64 * 2.6); border-radius: calc(100cqi / 64 * .35); background: var(--color-line); }
.af-sterne { display: flex; gap: calc(100cqi / 64 * .25); }
.af-sterne i { width: calc(100cqi / 64 * .9); height: calc(100cqi / 64 * .9); border-radius: var(--radius-round); background: var(--color-accent-soft-a40); }
.af-b--fuss { flex-direction: row; gap: calc(100cqi / 64 * 1.5); margin-top: auto; padding: calc(100cqi / 64 * .8) 0; background: transparent; box-shadow: none; border-top: 1px solid var(--color-line); border-radius: 0; }
.af-b--fuss > i { width: 14%; }

/* für später vorgemerkte Bausteine */
.af-b--modul.ist-spaeter { opacity: .55; background: transparent; box-shadow: none; outline: 1px dashed var(--color-line-strong); outline-offset: -1px; }
.af-b--modul em.af-spaeter-marke { background: var(--color-surface-3); color: var(--color-text-secondary); }

/* alte Website: grau, eng, „Willkommen auf unserer Homepage!“ */
.af-alt {
  position: absolute; inset: 0; z-index: var(--z-label); display: flex; flex-direction: column; gap: calc(100cqi / 64 * .6); padding: calc(100cqi / 64 * 1.2) calc(100cqi / 64 * 2);
  background: var(--color-device-screen); color: var(--color-text-tertiary);
}
.af-alt i { display: block; height: calc(100cqi / 64 * .45); border-radius: 0; background: var(--color-line-strong); }
.af-alt-kopf { display: flex; justify-content: space-between; align-items: center; }
.af-alt-kopf > span:first-child { width: calc(100cqi / 64 * 7); height: calc(100cqi / 64 * 2.2); background: var(--color-surface-3); }
.af-alt-nav { display: flex; gap: calc(100cqi / 64 * .4); }
.af-alt-nav i { width: calc(100cqi / 64 * 2.4); }
.af-alt-band { padding: calc(100cqi / 64 * .8); background: var(--color-surface-3); text-align: center; font-size: calc(100cqi / 64 * 1); color: var(--color-text-tertiary); }
.af-alt-spalten { flex: 1; display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: calc(100cqi / 64 * .8); }
.af-alt-spalten > div { display: flex; flex-direction: column; gap: calc(100cqi / 64 * .45); }
.af-alt-spalten i:nth-child(3n) { width: 70%; }
.af-alt-bild { background: var(--color-surface-2); box-shadow: var(--ring-option); }
.af-alt-fuss { display: flex; gap: calc(100cqi / 64 * 1); padding-top: calc(100cqi / 64 * .5); border-top: 1px solid var(--color-line); }
.af-alt-fuss i { width: 20%; }
.af-alt-etikett { position: absolute; left: calc(100cqi / 64 * 2); bottom: calc(100cqi / 64 * 1); padding: .3em .6em; background: var(--color-device-screen); color: var(--color-text-tertiary); font-size: calc(100cqi / 64 * .7); }
.af-pins { position: absolute; inset: calc(100cqi / 64 * 6) calc(100cqi / 64 * 3) auto auto; display: flex; flex-direction: column; align-items: flex-end; gap: calc(100cqi / 64 * .6); }
.af-pin {
  display: inline-flex; align-items: center; gap: .4em; padding: .4em .8em; border-radius: var(--radius-pill); background: var(--color-danger-a12); box-shadow: var(--ring-danger-soft);
  color: var(--color-text); font-size: calc(100cqi / 64 * 1.05); font-weight: var(--font-weight-medium); transform: rotate(calc((var(--i) - 1) * 2deg));
}
.af-pin svg { width: 1.1em; height: 1.1em; color: var(--color-danger); }
.af-pins .af-geist-mini { position: static; }
.af-alt.geht { animation: af-geht var(--dur-reveal-long) var(--ease-out) both; pointer-events: none; }
@keyframes af-geht { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.92) translateY(var(--motion-distance-lg)); } }

/* neue Elemente der Skizze */
.af-vp .ist-neu { animation: af-ein var(--dur-reveal) var(--ease-out) both; }
.af-b.ist-neu::after { content: ""; position: absolute; inset: 0; z-index: var(--z-label); border-radius: inherit; box-shadow: inset 0 0 0 1.5px var(--color-accent); animation: af-ring var(--dur-reveal-long) var(--ease-out) both; pointer-events: none; }
.af-b--nav.ist-neu::after, .af-b--fuss.ist-neu::after { display: none; }
.af-pin.ist-neu { animation: af-pop var(--dur-reveal-short) var(--ease-out) both; }
.af-alt.ist-neu { animation: af-auf var(--dur-reveal) var(--ease-out) both; }

/* ---------- Bauplan-Leiste ---------- */
.af-leiste { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
.af-leiste li {
  position: relative; display: flex; align-items: center; gap: var(--space-8); min-width: 0; min-height: var(--size-target); padding: var(--space-6) var(--space-10);
  border-radius: var(--radius-control); outline: 1px dashed var(--color-line-strong); outline-offset: -1px; color: var(--color-text-tertiary); font-size: var(--font-size-caption);
}
.af-leiste li > span { display: grid; min-width: 0; line-height: var(--leading-compact); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-leiste small { color: var(--color-text-tertiary); font-size: var(--font-size-mono-xs); text-transform: uppercase; letter-spacing: var(--tracking-mono); font-family: var(--font-mono); }
.af-fz { flex: none; display: grid; place-items: center; width: var(--space-20); height: var(--space-20); border-radius: var(--radius-round); background: var(--color-accent-a10); color: var(--color-accent-soft); font: var(--font-weight-display) var(--font-size-small) / 1 var(--font-display); }
.af-leiste li.ist-voll { outline: 0; background: var(--color-surface-2); box-shadow: var(--ring-option); color: var(--color-text); }
.af-leiste li.ist-voll svg { flex: none; width: var(--size-icon-sm); height: var(--size-icon-sm); color: var(--color-accent); }
.af-leiste li.ist-knapp { box-shadow: var(--ring-danger-soft); }
.af-leiste li.ist-knapp svg { color: var(--color-danger); }
.af-leiste li.ist-ziel { outline: 1.5px solid var(--color-accent); color: var(--color-text); animation: af-puls var(--dur-reveal-long) var(--ease-out) 3; }
.af-leiste li.ist-neu { animation: af-pop var(--dur-reveal-short) var(--ease-out) both; }
@media (max-width: 767.98px) {
  .af-leiste { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
  .af-leiste li { flex-direction: column; justify-content: center; gap: var(--space-2); padding: var(--space-4); text-align: center; }
  .af-leiste li > span { font-size: var(--font-size-mono-xs); }
  .af-leiste li svg, .af-fz { display: none; }
}

/* ---------- Bewegung ---------- */
@keyframes af-auf { from { opacity: 0; transform: translateY(var(--motion-distance-sm)); } to { opacity: 1; transform: none; } }
@keyframes af-ein { from { opacity: 0; transform: translateY(var(--motion-distance-xs)) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes af-pop { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
@keyframes af-ring { 0%, 50% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .af-held *, .af-held *::before, .af-held *::after { animation: none !important; }
}

/* ======================= ab 1024 px ======================= */
@media (min-width: 1024px) {
  .af-raster {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: var(--space-64); row-gap: var(--space-32);
    grid-template-areas: "kopf buehne" "werkzeug buehne"; grid-template-rows: auto 1fr;
  }
  .af-buehne { position: sticky; top: calc(var(--kopf-h) + var(--space-48)); align-self: start; padding-top: var(--space-24); }
  .af-frage-karte { padding: var(--space-32); }
  /* Spalte lang genug, damit die Bühne beim Scrollen kleben bleibt */
  .af-werkzeug { min-height: calc(100svh - var(--kopf-h)); }
}