/* =============================================================================
   Mini Cafe · Fassung 2 · gemeinsam/ablauf.css  (zu gemeinsam/ablauf.js)
   Varianten von „So funktioniert’s“: a Weg · b Karten · c Geschichte · d Kassenbon
   Farben nur aus den Variablen von basis.css. Eigene Variablen (alle am .ablauf):
     --linie        Farbe der feinen Zeichnungen/Linien (die Startseite setzt sie; Ersatz: --text-still)
     --ab-akz       die eine Akzentfarbe (hell: --haupt, dunkel: --akzent)
   Bewegung steckt nur in Klassen, die das Skript bei „ruhig“ / bild=1 gar nicht erst setzt.
   Computer-Umbruch wie die Startseite: ab 700 px drei Spalten.
   ============================================================================= */

.ablauf-weg { display: none !important; }

.ablauf {
  --ab-linie: var(--linie, var(--text-still));
  --ab-akz: var(--haupt);
  position: relative; margin-top: 22px; color: var(--text);
}
html[data-look="dunkel"] .ablauf { --ab-akz: var(--akzent); }
.ablauf ol { list-style: none; margin: 0; padding: 0; }
.ablauf h3, .ablauf p { margin: 0; }
.ablauf-bild { display: block; position: relative; flex: none; }
.ablauf-ico { display: block; width: 100%; height: 100%; color: var(--ab-linie); overflow: visible; }
.ablauf-bild { opacity: 1; transition: opacity .25s ease; }

/* Überschrift der Schritte: wie bisher (hell Figtree fett, dunkel Gloock) */
.ablauf-name { font: 700 18px/1.25 var(--schrift); letter-spacing: -0.01em; color: var(--text); }
html[data-look="dunkel"] .ablauf-name { font: 400 21px/1.2 var(--schrift-titel); letter-spacing: 0; }
.ablauf-nr { font-weight: 600; font-size: .9em; color: var(--text-neben); margin-inline-end: 8px; }
.ablauf-text p { margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--text); }
@media (min-width: 700px) {
  .ablauf-name { font-size: 21px; }
  html[data-look="dunkel"] .ablauf-name { font-size: 25px; }
  .ablauf-text p { font-size: 17px; }
}

/* ============================ a · gezeichneter Weg ============================ */
.ablauf--a .ablauf-pfad { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.ablauf--a .ablauf-spur { fill: none; stroke: var(--ab-linie); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 1 8; opacity: .5; }
.ablauf--a .ablauf-linie { fill: none; stroke: var(--ab-linie); stroke-width: 1.6; stroke-linecap: round; }
.ablauf--a .ablauf-liste { position: relative; display: grid; gap: 46px; }
.ablauf--a .ablauf-schritt { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 18px; align-items: center; }
.ablauf--a .ablauf-schritt:nth-child(even) { grid-template-columns: minmax(0, 1fr) 108px; }
.ablauf--a .ablauf-schritt:nth-child(even) .ablauf-bild { order: 2; }
.ablauf--a .ablauf-schritt:nth-child(even) .ablauf-text { text-align: right; }
.ablauf--a .ablauf-bild--gross { width: 108px; height: 108px; }
@media (min-width: 700px) {
  .ablauf--a { margin-top: 30px; }
  .ablauf--a .ablauf-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; }
  .ablauf--a .ablauf-schritt, .ablauf--a .ablauf-schritt:nth-child(even) { display: block; }
  .ablauf--a .ablauf-schritt:nth-child(even) .ablauf-text { text-align: left; }
  .ablauf--a .ablauf-bild--gross { width: 116px; height: 116px; margin-bottom: 22px; }
}
@media (min-width: 1024px) {
  .ablauf--a .ablauf-bild--gross { width: 140px; height: 140px; }
  .ablauf--a .ablauf-liste { gap: 80px; }
}
.ablauf-bew.ablauf--a .ablauf-text { transition: opacity .7s var(--kurve-gleiten), transform .7s var(--kurve-gleiten); }
.ablauf-bew.ablauf--a .ablauf-schritt:not(.da) .ablauf-text { opacity: 0; transform: translateY(10px); }
.ablauf-bew .ablauf-bild:not(.da) { opacity: 0; }

/* ============================ b · drei Zeichen-Karten ============================ */
.ablauf--b .ablauf-liste { display: grid; gap: 14px; }
.ablauf--b .ablauf-karte {
  position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 20px; align-items: center;
  padding: 20px 20px 22px; border-radius: var(--rund-karte); background: var(--flaeche);
}
.ablauf--b .ablauf-bild--karte { grid-row: 1 / span 2; width: 88px; height: 88px; }
.ablauf--b .ablauf-zahl {
  align-self: end; font: 400 52px/.9 var(--schrift-titel); letter-spacing: -0.02em; color: var(--ab-akz);
  font-variant-numeric: lining-nums;
}
html[data-look="hell"] .ablauf--b .ablauf-zahl { font-weight: 500; }
.ablauf--b .ablauf-text { margin-top: 8px; }
@media (min-width: 700px) {
  .ablauf--b { margin-top: 30px; }
  .ablauf--b .ablauf-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .ablauf--b .ablauf-karte { display: block; padding: 28px 28px 32px; min-height: 100%; }
  .ablauf--b .ablauf-bild--karte { width: 112px; height: 112px; margin-bottom: 20px; }
  .ablauf--b .ablauf-zahl { position: absolute; top: 22px; right: 28px; font-size: 84px; }
  .ablauf--b .ablauf-text { margin-top: 0; }
}
@media (min-width: 1024px) {
  .ablauf--b .ablauf-bild--karte { width: 132px; height: 132px; }
  .ablauf--b .ablauf-zahl { font-size: 96px; }
}
.ablauf-bew.ablauf--b .ablauf-karte { transition: opacity .8s var(--kurve-gleiten) var(--v, 0ms), transform .8s var(--kurve-gleiten) var(--v, 0ms); }
.ablauf-bew.ablauf--b .ablauf-karte:not(.da) { opacity: 0; transform: translateY(20px); }

/* ============================ c · Geschichte beim Scrollen ============================ */
.ablauf--c { --bue-h: 440px; --lauf: 130vh; --ik: 168px; }
@supports (height: 1svh) { .ablauf--c { --lauf: 130svh; } }
.ablauf--c:not(.ablauf--still) { height: calc(var(--bue-h) + var(--lauf)); }
.ablauf--c .ablauf-buehne { position: sticky; top: 80px; height: var(--bue-h); }
.ablauf--c:not(.ablauf--still) .ablauf-liste { display: grid; height: 100%; }
.ablauf--c:not(.ablauf--still) .ablauf-schritt {
  grid-area: 1 / 1; display: grid; align-content: center; justify-items: center; text-align: center; gap: 22px; padding-bottom: 28px;
}
.ablauf--c .ablauf-szene { display: grid; justify-items: center; gap: 14px; }
.ablauf--c .szene-bild { position: relative; display: block; width: var(--ik); height: var(--ik); }
.ablauf--c .szene-bild > .ablauf-ico { position: absolute; inset: 0; }
.ablauf--c .szene-grund { opacity: .3; }
.ablauf--c .szene-fuell { position: absolute; inset: 0; display: block; clip-path: inset(90% 0 0 0); }
.ablauf--c .szene-zutat { position: absolute; top: 0; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; background: var(--ab-akz); opacity: 0; }
.ablauf--c .szene-ring { position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; overflow: visible; }
.ablauf--c .szene-ring circle { fill: var(--ab-linie); opacity: .35; transition: fill .15s, opacity .15s; }
.ablauf--c .szene-ring circle.an { fill: var(--ab-akz); opacity: 1; }
.ablauf--c .szene-zeit { font: 600 30px/1 var(--schrift); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--ab-akz); }
html[data-look="dunkel"] .ablauf--c .szene-zeit { font: 400 34px/1 var(--schrift-titel); }
.ablauf--c .szene-tuete { position: absolute; inset: 0; display: block; }
.ablauf--c .szene-haken { position: absolute; right: -6%; top: -4%; width: 36%; height: 36%; overflow: visible; }
.ablauf--c .hk-kreis, .ablauf--c .hk-strich { fill: none; stroke: var(--ab-akz); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1.01 1.01; }
.ablauf--c .hk-kreis { fill: var(--grund); }
.ablauf--c .ablauf-punkte { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 8px; }
.ablauf--c .ablauf-punkte i { width: 7px; height: 7px; border-radius: 50%; background: var(--ab-linie); opacity: .4; transition: opacity .2s, background-color .2s, transform .2s; }
.ablauf--c .ablauf-punkte i.an { background: var(--ab-akz); opacity: 1; transform: scale(1.25); }
@media (min-width: 700px) {
  .ablauf--c { --bue-h: 420px; --ik: 250px; --lauf: 150vh; }
  @supports (height: 1svh) { .ablauf--c { --lauf: 150svh; } }
  .ablauf--c:not(.ablauf--still) .ablauf-schritt {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); justify-items: stretch; align-items: center; text-align: left; column-gap: 56px; padding-bottom: 36px;
  }
  .ablauf--c:not(.ablauf--still) .ablauf-szene { justify-items: center; }
  .ablauf--c:not(.ablauf--still) .ablauf-text { max-width: 26em; }
  .ablauf--c:not(.ablauf--still) .ablauf-name { font-size: 28px; }
  html[data-look="dunkel"] .ablauf--c:not(.ablauf--still) .ablauf-name { font-size: 34px; }
  .ablauf--c:not(.ablauf--still) .ablauf-text p { font-size: 19px; }
}
/* Ruhig / Fotomodus: die drei Endzustände nebeneinander bzw. untereinander */
.ablauf--still { --ik: 96px; }
.ablauf--still .ablauf-buehne { position: static; height: auto; }
.ablauf--still .ablauf-liste { display: grid; gap: 34px; }
.ablauf--still .ablauf-schritt { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: center; }
.ablauf--still .szene-grund, .ablauf--still .szene-zutat, .ablauf--still .ablauf-punkte { display: none; }
.ablauf--still .szene-fuell { clip-path: none; }
.ablauf--still .szene-ring circle { fill: var(--ab-akz); opacity: .9; }
.ablauf--still .szene-zeit { font-size: 20px; width: var(--ik); text-align: center; }
html[data-look="dunkel"] .ablauf--still .szene-zeit { font-size: 22px; }
.ablauf--still .hk-kreis, .ablauf--still .hk-strich { stroke-dasharray: none; }
@media (min-width: 700px) {
  .ablauf--still { --ik: 130px; margin-top: 30px; }
  .ablauf--still .ablauf-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
  .ablauf--still .ablauf-schritt { grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
  .ablauf--still .ablauf-szene { justify-items: start; padding-inline-start: 14px; }
  .ablauf--still .szene-zeit { font-size: 24px; }
}

/* ============================ d · Kassenbon ============================ */
.ablauf--d {
  --bon-papier: var(--flaeche); --bon-tinte: var(--text);
  --bon-schrift: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, "Courier New", monospace;
  padding: 12px 0 18px;
}
html[data-look="dunkel"] .ablauf--d { --bon-papier: var(--text); --bon-tinte: var(--grund-tief); }
.ablauf--d .bon-huelle { max-width: 372px; margin-inline: auto; filter: drop-shadow(0 8px 16px rgba(29, 29, 27, .14)); transform: rotate(-.9deg); }
html[data-look="dunkel"] .ablauf--d .bon-huelle { filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .4)); }
.ablauf--d .bon {
  position: relative; padding: 26px 24px 22px; background: var(--bon-papier); color: var(--bon-tinte);
  font: 400 13px/1.5 var(--bon-schrift); letter-spacing: .01em;
}
.ablauf--d .bon::before, .ablauf--d .bon::after { content: ""; position: absolute; left: 0; right: 0; height: 9px; background-size: 18px 100%; }
.ablauf--d .bon::before { top: -8px; background-image: conic-gradient(from 135deg at 50% 0%, var(--bon-papier) 0 90deg, transparent 0); }
.ablauf--d .bon::after { bottom: -8px; background-image: conic-gradient(from -45deg at 50% 100%, var(--bon-papier) 0 90deg, transparent 0); }
.ablauf--d .bon-laden { text-align: center; font-weight: 700; font-size: 17px; letter-spacing: .32em; padding-inline-start: .32em; }
.ablauf--d .bon-adr { text-align: center; font-size: 11.5px; opacity: .72; margin-top: 2px; }
.ablauf--d .bon-sep { border-top: 1.5px dashed currentColor; opacity: .38; margin: 14px 0; }
.ablauf--d .bon-zeile { display: flex; justify-content: space-between; gap: 12px; text-transform: uppercase; letter-spacing: .08em; font-size: 12.5px; }
.ablauf--d .bon-zeile b { font-weight: 700; }
.ablauf--d .bon-liste { display: grid; gap: 14px; }
.ablauf--d .bon-name { font: 700 13px/1.4 var(--bon-schrift); text-transform: uppercase; letter-spacing: .08em; color: inherit; }
.ablauf--d .bon-nr { display: inline-block; min-width: 2.2em; opacity: .65; }
.ablauf--d .bon-posten p { margin: 2px 0 0 2.2em; font-size: 13px; line-height: 1.45; opacity: .85; text-transform: none; }
.ablauf--d .bon-summe { font-size: 13px; }
.ablauf--d .bon-strich {
  height: 38px; width: 76%; margin: 16px auto 8px; opacity: .85;
  background: repeating-linear-gradient(90deg, var(--bon-tinte) 0 2px, transparent 2px 4px, var(--bon-tinte) 4px 5px, transparent 5px 8px, var(--bon-tinte) 8px 11px, transparent 11px 12px, var(--bon-tinte) 12px 13px, transparent 13px 16px);
}
.ablauf--d .bon-dank { text-align: center; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
@media (min-width: 700px) {
  .ablauf--d { margin-top: 36px; }
  .ablauf--d .bon-huelle { max-width: 420px; }
  .ablauf--d .bon { font-size: 14px; padding: 30px 30px 26px; }
  .ablauf--d .bon-name, .ablauf--d .bon-posten p { font-size: 14px; }
}
/* der Bon „druckt“ Zeile für Zeile */
.ablauf-bew.ablauf--d .bon :is(.bon-laden, .bon-adr, .bon-sep, .bon-zeile, .bon-posten, .bon-strich, .bon-dank) {
  transition: clip-path .5s var(--kurve-gleiten), opacity .4s ease;
}
.ablauf-bew.ablauf--d .bon:not(.da) :is(.bon-laden, .bon-adr, .bon-sep, .bon-zeile, .bon-posten, .bon-strich, .bon-dank) {
  clip-path: inset(0 0 100% 0); opacity: 0;
}
.ablauf-bew.ablauf--d .bon.da :is(.bon-laden, .bon-adr, .bon-sep, .bon-zeile, .bon-posten, .bon-strich, .bon-dank) {
  clip-path: inset(-4px -4px -4px -4px);
}