/* Ablauf-Animation - Stil
   Die Tokens unten erwartet der Baustein. Werte anpassen oder durch die
   eigenen ersetzen; die Klassennamen darunter bleiben unveraendert. */
.ablauf {
  --papier: #09090c;
  --weiss: #f2eee7;
  --schwarz: #1a1613;
  --text: #f3f1f8;
  --grau: #a5a2af;
  --bronze: #8860f2;
  --bronze-dunkel: #b69aff;
  --linie: #ffffff20;
  --rand: clamp(1.25rem, 4.5vw, 4rem);
  --f-display: 'Space Grotesk', system-ui, sans-serif;
  --f-text: 'Inter', system-ui, sans-serif;
}

/* ---------- Ablauf: vier Ebenen, beim Scrollen aufgefaechert ---------- */
.ablauf { background: var(--papier); }
.ablauf__bahn { height: 280vh; }
.ablauf__fest { position: sticky; top: 0; min-height: 100vh; display: grid; align-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem); padding: 4rem var(--rand) 2rem; }
@media (min-width: 62rem) { .ablauf__fest { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: center; } }

.schritte { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 1px; background: var(--linie); }
.schritte li { background: var(--papier); }
.schritte button { width: 100%; text-align: left; display: grid; grid-template-columns: 2.1rem minmax(0, 1fr);
  gap: 0 0.7rem; padding: 0.95rem 0; border: 0; background: transparent; cursor: pointer; font: inherit; }
.schritte .n { grid-row: span 2; padding-top: 0.35rem; font-size: 0.78rem; color: var(--grau);
  font-variant-numeric: tabular-nums; transition: color 0.4s; }
.schritte b { font-family: var(--f-display); font-weight: 400; font-size: 1.3rem; letter-spacing: -0.03em;
  color: var(--grau); transition: color 0.4s; }
.schritte .d { display: grid; grid-template-rows: 0fr; opacity: 0; font-size: 0.9rem; color: var(--grau);
  transition: grid-template-rows 0.5s cubic-bezier(0.22,1,0.36,1), opacity 0.4s; }
.schritte .d > span { overflow: hidden; }
.schritte button[aria-current="step"] b { color: var(--text); }
.schritte button[aria-current="step"] .n { color: var(--bronze-dunkel); }
.schritte button[aria-current="step"] .d { grid-template-rows: 1fr; opacity: 1; padding-top: 0.35rem; }

.buehne { perspective: 2400px; min-width: 0; --kipp: 54; --dreh: -30; --tiefe: 130; }
.faecher { position: relative; aspect-ratio: 16 / 10; transform-style: preserve-3d; }
/* Die vier Ebenen sind immer ein weisses Blatt, auch im Dunkelmodus. Deshalb
   gelten hier drinnen die hellen Farbwerte, sonst schreibt die Zeichnung
   hell auf hell. */
.ebene { --text: #1a1613; --schwarz: #1a1613; --weiss: #f2eee7;
  --bronze-dunkel: #8a5624; --grau: #6b635a; --linie: rgba(25, 23, 20, 0.2);
  color: var(--text);
  position: absolute; inset: 0; overflow: hidden; background: #fdfcfa; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(25, 23, 20, 0.22); opacity: 0; transition: opacity 0.35s ease-out; }
.ebene.is-da { opacity: 1; }
.ablauf.is-gefaechert .ebene.is-da:not(.is-aktiv) { opacity: 0.38; }
.ablauf.is-einzeln .ebene { opacity: 0; transform: none !important; }
.ablauf.is-einzeln .ebene.is-aktiv { opacity: 1; }
.ebene img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ebene__schild { position: absolute; z-index: 4; left: 3%; top: 4.5%; padding: 0.4em 0.75em;
  background: var(--schwarz); color: var(--weiss); font: 500 max(10px, 1.35cqi)/1 var(--f-text);
  opacity: var(--e, 0); }
.ablauf.is-einzeln .ebene__schild { opacity: 1; }

.ebene--skizze { container-type: inline-size;
  background-image: linear-gradient(rgba(25,23,20,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(25,23,20,0.05) 1px, transparent 1px);
  background-size: 3% 4.8%; }
.ebene--skizze svg { width: 100%; height: 100%; }
.ebene--skizze :is(path, rect, circle, line) { fill: none; stroke: #2e2a25; stroke-width: 3.5;
  stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.22,1,0.36,1); transition-delay: calc(var(--d, 0) * 130ms); }
.ebene--skizze text { font: 400 40px var(--f-display); fill: var(--bronze-dunkel); opacity: 0;
  transition: opacity 0.8s; transition-delay: calc(var(--d, 0) * 130ms + 700ms); }
.ablauf.is-gezeichnet .ebene--skizze :is(path, rect, circle, line) { stroke-dashoffset: 0; }
.ablauf.is-gezeichnet .ebene--skizze text { opacity: 1; }

.ebene--entwurf { container-type: inline-size; padding: 4cqi; display: grid; gap: 2.2cqi;
  grid-template-rows: auto 1fr; background: #f2f0ec; }
.ebene--entwurf i { display: block; background: #cfcac2; border-radius: 1px; }
.ebene--entwurf .kopf { display: grid; grid-template-columns: 12cqi 1fr; gap: 2cqi; align-items: center; }
.ebene--entwurf .kopf i { height: 2.6cqi; }
.ebene--entwurf .unten { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4cqi; align-content: start; }
.ebene--entwurf .links { display: grid; gap: 1.6cqi; align-content: start; }
.ebene--entwurf .links i:nth-child(1) { height: 1.6cqi; width: 40%; }
.ebene--entwurf .links i:nth-child(2) { height: 5cqi; }
.ebene--entwurf .links i:nth-child(3) { height: 5cqi; width: 80%; }
.ebene--entwurf .links i:nth-child(4) { height: 2cqi; width: 92%; }
.ebene--entwurf .links i:nth-child(5) { height: 3.4cqi; width: 34%; background: #b6b0a7; }
.ebene--entwurf .rechts { background: #ddd9d2; border-radius: 2px; }

.ebene--design img { filter: grayscale(1) contrast(0.92); }
.ebene--design::after { content: ""; position: absolute; inset: 0 5%; z-index: 2; pointer-events: none;
  background-image: linear-gradient(90deg, rgba(181, 118, 60, 0.16) 0 70%, transparent 70%);
  background-size: calc(100% / 12) 100%; }

.marken { position: absolute; z-index: 3; right: 3%; bottom: 5%; display: flex; align-items: center; gap: 0.5em;
  padding: 0.55em 0.75em; background: var(--schwarz); color: var(--weiss); font: 500 max(10px, 1.3cqi)/1 var(--f-text); }
.marken span { width: 1.6em; height: 1.6em; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3); }
.marken b { margin-left: 0.3em; padding-left: 0.6em; border-left: 1px solid rgba(255,255,255,0.25);
  font-family: var(--f-display); font-weight: 400; font-size: 1.5em; }

.plaketten { position: absolute; z-index: 2; right: 3%; bottom: 4.5%; display: flex; flex-wrap: wrap;
  justify-content: end; gap: 0.5em; }
.plaketten span { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.45em 0.75em;
  background: var(--weiss); color: var(--schwarz); font: 500 max(10px, 1.3cqi)/1 var(--f-text);
  box-shadow: 0 0 0 1px rgba(25,23,20,0.18); opacity: 0; transform: translateY(10px);
  transition: opacity 0.6s, transform 0.6s; transition-delay: calc(var(--i, 0) * 80ms + 100ms); }
.plaketten i { width: 0.55em; height: 0.55em; border-radius: 50%; background: #2f7d4a; }

/* Portfolio integration: dark construction layers, violet details. */
.ablauf { border-block: 1px solid var(--line); background: radial-gradient(ellipse at 75% 45%,#6633aa20,transparent 60%),var(--papier); }
.ablauf__bahn { height: auto; }
.ablauf__fest { position: relative; min-height: 0; padding: 80px 5%; gap: 60px; }
.ablauf h2 { font-size: clamp(32px,3.4vw,52px); line-height: 1.1; letter-spacing: -.05em; margin: 20px 0 28px; }
.ablauf .schritte { background: transparent; }
.ablauf .schritte li { background: transparent; border-bottom: 1px solid var(--line); }
.ablauf .schritte b { font-weight: 600; }
.ablauf .schritte .d { font-size: 1rem; }
.ablauf .schritte .n { font-size: .875rem; }
.ablauf .schritte button[aria-current="step"] b { color: var(--purple); }
.ablauf .buehne { margin: 25px 0; }
.ablauf .ebene { --schwarz:#141019; --weiss:#f3f1f8; --bronze-dunkel:#b69aff; border-radius: 8px; box-shadow: 0 0 0 1px #b69aff55,0 24px 70px #0006; }
.ablauf .ebene--skizze { background-color: #15121c; background-image: linear-gradient(#b69aff12 1px,transparent 1px),linear-gradient(90deg,#b69aff12 1px,transparent 1px); }
.ablauf .ebene--skizze :is(path,rect,circle,line) { stroke: #d3bcff; }
.ablauf .ebene--entwurf { background: #17131f; }
.ablauf .ebene--entwurf i { background: #484050; }
.ablauf .ebene--entwurf .links i:nth-child(5) { background: #8860f2; }
.ablauf .ebene--entwurf .rechts { background: #30283d; }
.ablauf .ebene--design::after { background-image: linear-gradient(90deg,#8860f22b 0 70%,transparent 70%); }
.ablauf .ebene__schild,.ablauf .marken,.ablauf .plaketten span { font-size: 12px; }
.ablauf.is-live .plaketten span { opacity: 1; transform: none; }
.ablauf .plaketten span { background: #17131f; color: #e6d9ff; }
.ablauf .plaketten i { background: #b69aff; }
@media(min-width:1000px) and (prefers-reduced-motion:no-preference) {
  .ablauf__bahn { height: 280vh; }
  .ablauf__fest { position: sticky; top: 96px; min-height: calc(100vh - 96px); padding-block: 35px; grid-template-columns: minmax(0, .8fr) minmax(0,1.4fr); }
}
@media(min-width:1000px) and (max-height:800px) {
  .ablauf__fest { gap: 35px; padding-block: 18px; }
  .ablauf h2 { font-size: 32px; margin: 12px 0 16px; }
  .ablauf .schritte { margin-top: 12px; }
  .ablauf .schritte button { padding-block: 10px; }
  .ablauf .buehne { width: min(100%, 85vh); justify-self: center; margin-block: 10px; }
}
@media(max-width:999px) {
  .ablauf__fest { grid-template-columns: 1fr; gap: 25px; padding-block: 60px; }
  .ablauf .buehne { width: min(100%,700px); margin: 0 auto; }
  .ablauf .faecher { aspect-ratio: 1400 / 774; }
}
@media(prefers-reduced-motion:reduce) {
  .ablauf *, .ablauf *::after { transition: none !important; animation: none !important; }
}