/* SURA – Entwurf 4 "apple" – Bühne des Ablauf-Films.
   Im Stylesheet steht das Ruhebild (Schritt 5). film.js stellt daraus die Zustände davor her und bewegt
   ausschließlich transform und opacity.
   Maßeinheit der Bühne ist --u: ein Entwurfs-Pixel. Die Welt ist quer 1100 × 424 und hochkant 358 × 436
   Einheiten groß und füllt die Bühne proportional – ohne Skript und ohne verkleinerte Schrift. */

.buehne {
  position: relative; container-type: size; overflow: hidden;
  height: clamp(424px, calc(100svh - 448px), 540px);
  border-radius: 28px;
  background: linear-gradient(180deg, #eff3f6 0%, #e2e9ee 100%);
  perspective: 1500px; perspective-origin: 50% 40%;
  -webkit-tap-highlight-color: transparent;
}

.welt {
  --W: 1100; --H: 424;
  --fx: 240; --fy: 22; --fw: 620; --fh: 384;      /* das Fenster "Posteingang" */
  --kh: 52; --zeile: 42; --kk: 76; --gr: 44;       /* Kopf, Zeile, Kundenkarte, Gruppenkopf */
  --kw: 128; --kb: 190; --pl: 18;                            /* Spalte Kanalwort, Breite der verstreuten Karte */
  --gross: 20; --mittel: 17; --klein: 17;
  --u: 1px;
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--u) * var(--W)); height: calc(var(--u) * var(--H));
  margin-left: calc(var(--u) * var(--W) / -2); margin-top: calc(var(--u) * var(--H) / -2);
  color: var(--tinte); line-height: 1.2;
}
@supports (width: 1cqw) {
  .welt { --u: min(calc(100cqw / var(--W)), calc(100cqh / var(--H))); }
}
.welt b { font-weight: 700; }

/* ---------- Das Fenster: der eine Gegenstand ---------- */
.fenster {
  position: absolute; left: calc(var(--u) * var(--fx)); top: calc(var(--u) * var(--fy));
  width: calc(var(--u) * var(--fw)); height: calc(var(--u) * var(--fh));
  transform-origin: 50% 0; transform: translateY(calc(var(--u) * -12)) scale(.94);   /* Ruhebild: tritt hinter das Blatt zurück */
}
.rahmen { position: absolute; inset: 0; background: #fff; border-radius: calc(var(--u) * 20); box-shadow: 0 0 0 calc(var(--u) * 1) rgba(0, 40, 60, .06), 0 calc(var(--u) * 28) calc(var(--u) * 56) calc(var(--u) * -22) rgba(0, 60, 90, .34); }
.rahmen__kopf { height: calc(var(--u) * var(--kh)); display: flex; align-items: center; gap: calc(var(--u) * 12); padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 30); }
.rahmen__titel { font: 800 calc(var(--u) * var(--gross))/1 var(--kopf); letter-spacing: -.02em; }
.rahmen__zahl { font-size: calc(var(--u) * var(--mittel)); color: var(--grau); }
.rahmen__suchfeld { margin-left: auto; height: calc(var(--u) * 34); display: flex; align-items: center; padding: 0 calc(var(--u) * 16); border-radius: 999px; background: var(--flaeche); color: var(--grau); font-size: calc(var(--u) * var(--mittel)); }

.suche { position: absolute; left: calc(var(--u) * 8); right: calc(var(--u) * 8); top: calc(var(--u) * 7); height: calc(var(--u) * (var(--kh) - 14)); display: flex; align-items: center; gap: calc(var(--u) * 12); padding: 0 calc(var(--u) * 16); background: #fff; border-radius: calc(var(--u) * 12); box-shadow: inset 0 0 0 calc(var(--u) * 2) var(--mitte); font-weight: 600; font-size: calc(var(--u) * var(--gross)); opacity: 0; }
.suche__lupe { width: calc(var(--u) * 14); height: calc(var(--u) * 14); border-width: calc(var(--u) * 2.4); }
.suche__lupe::after { width: calc(var(--u) * 7); height: calc(var(--u) * 2.4); }
.suche__text, .kundensuche__feld > span { position: relative; display: inline-block; }
.frage__text { position: relative; display: block; }

.grund { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12); top: calc(var(--u) * var(--kh)); height: 0; }
.grund > * { opacity: 0; }
.liste { z-index: 1; }
.kundensuche { z-index: 3; }
.gruppe { position: absolute; z-index: 2; left: calc(var(--u) * 12); right: calc(var(--u) * 12); top: calc(var(--u) * var(--kh)); height: calc(var(--u) * var(--gr)); display: flex; align-items: center; column-gap: calc(var(--u) * 10); padding: 0 calc(var(--u) * 12) 0 calc(var(--u) * 18); opacity: 0; }
.gruppe__schiene { position: absolute; z-index: 1; left: 0; top: calc(var(--u) * 10); width: calc(var(--u) * 4); height: calc(var(--u) * (var(--gr) + 5 * var(--zeile) - 16)); background: var(--mitte); border-radius: calc(var(--u) * 2); transform-origin: 50% 0; }
.gruppe__flaeche { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * (var(--gr) + 5 * var(--zeile) + 4)); background: var(--hauch); border-radius: calc(var(--u) * 14); }
.gruppe__name, .gruppe__nr, .gruppe__herkunft { position: relative; }
.gruppe__traeger { position: absolute; left: calc(var(--u) * 4); top: calc(var(--u) * 3); bottom: calc(var(--u) * 3); width: calc(var(--u) * 330); background: #fff; border-radius: calc(var(--u) * 12); box-shadow: 0 0 0 calc(var(--u) * 1) rgba(0, 40, 60, .08), 0 calc(var(--u) * 12) calc(var(--u) * 24) calc(var(--u) * -10) rgba(0, 50, 80, .45); opacity: 0; }
.gruppe__name { font-size: calc(var(--u) * var(--gross)); }
.gruppe__nr, .kundenkarte__nr { font-size: calc(var(--u) * var(--mittel)); font-weight: 600; color: #00527f; background: var(--hell); padding: calc(var(--u) * 2) calc(var(--u) * 8); border-radius: calc(var(--u) * 7); }
.gruppe__herkunft, .kundenkarte__herkunft { margin-left: auto; font-size: calc(var(--u) * var(--klein)); color: var(--grau); }

.kundenkarte { position: relative; margin: calc(var(--u) * var(--kh)) calc(var(--u) * 12) 0; height: calc(var(--u) * var(--kk)); padding: 0 calc(var(--u) * 12) 0 calc(var(--u) * 18); background: var(--hauch); border-radius: calc(var(--u) * 14); display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 5); }
.kundenkarte__kopf { display: flex; align-items: center; gap: calc(var(--u) * 10); font-size: calc(var(--u) * var(--gross)); }
.kundenkarte__daten { font-size: calc(var(--u) * var(--klein)); color: var(--grau); white-space: nowrap; }

.liste { position: relative; margin: calc(var(--u) * (var(--kh) + 6)) calc(var(--u) * 12) 0; list-style: none; }
.eingang { margin-bottom: calc(var(--u) * 3); }
.eingang { position: relative; height: calc(var(--u) * var(--zeile)); display: flex; align-items: center; padding-left: calc(var(--u) * 18); }
.eingang__kachel { position: absolute; left: 0; right: 0; top: calc(var(--u) * 1.5); bottom: calc(var(--u) * 1.5); background: var(--flaeche); border-radius: calc(var(--u) * 10); }
.eingang__kanal { position: relative; flex: none; width: calc(var(--u) * var(--kw)); font-size: calc(var(--u) * var(--gross)); line-height: 1; letter-spacing: -.01em; }
.eingang__inhalt { position: relative; font-size: calc(var(--u) * var(--mittel)); color: var(--grau); white-space: nowrap; }
.eingang__ort { position: absolute; left: calc(var(--u) * 18); top: calc(var(--u) * (var(--zeile) - 4)); font-size: calc(var(--u) * var(--klein)); color: var(--grau); white-space: nowrap; opacity: 0; }
.eingang__griff { position: absolute; right: calc(var(--u) * 6); top: 50%; height: calc(var(--u) * 32); margin-top: calc(var(--u) * -16); display: flex; align-items: center; padding: 0 calc(var(--u) * 14); background: #fff; color: var(--blau); font-weight: 600; font-size: calc(var(--u) * var(--mittel)); border-radius: 999px; box-shadow: inset 0 0 0 calc(var(--u) * 1.5) var(--blau); opacity: 0; }

/* Die verstreute Fassung desselben Eingangs: ein Ding an seinem Ort (Schritt 1). Nur Fläche – die Wörter gehören der Zeile. */
.eingang__karte { position: absolute; left: 0; top: calc(var(--u) * -14); width: calc(var(--u) * var(--kb)); height: calc(var(--u) * 90); background: #fff; border-radius: calc(var(--u) * 4); box-shadow: 0 0 0 calc(var(--u) * 1) rgba(0, 40, 60, .08), 0 calc(var(--u) * 16) calc(var(--u) * 26) calc(var(--u) * -12) rgba(0, 40, 60, .42); opacity: 0; }
.eingang__karte::before, .eingang__karte::after { content: ""; position: absolute; }
/* Fax: Papier mit Sendezeile */
.eingang--fax .eingang__karte::before { left: calc(var(--u) * 14); right: calc(var(--u) * 14); top: calc(var(--u) * 8); border-top: calc(var(--u) * 1.5) dashed #aab4ba; }
/* Rezept: das rosa Blatt */
.eingang--rezept .eingang__karte { background: #fbe4e6; box-shadow: 0 0 0 calc(var(--u) * 1) #e3a3aa, 0 calc(var(--u) * 16) calc(var(--u) * 26) calc(var(--u) * -12) rgba(0, 40, 60, .42); }
.eingang--rezept .eingang__karte::before { right: calc(var(--u) * 12); top: calc(var(--u) * 12); width: calc(var(--u) * 34); height: calc(var(--u) * 22); border: calc(var(--u) * 1.5) solid #d98990; border-radius: calc(var(--u) * 2); }
/* WhatsApp: das Handy */
.eingang--whatsapp .eingang__karte { top: calc(var(--u) * -24); height: calc(var(--u) * 108); width: calc(var(--u) * (var(--kb) - 18)); border: calc(var(--u) * 5) solid #1f2a30; border-radius: calc(var(--u) * 22); }
.eingang--whatsapp .eingang__karte::before { left: 50%; top: calc(var(--u) * 5); width: calc(var(--u) * 36); height: calc(var(--u) * 5); margin-left: calc(var(--u) * -18); background: #1f2a30; border-radius: 999px; }
/* E-Mail und Website: zwei Fenster am Bildschirm */
.eingang--email .eingang__karte, .eingang--website .eingang__karte { top: calc(var(--u) * -24); height: calc(var(--u) * 100); border-radius: calc(var(--u) * 10); }
.eingang--email .eingang__karte::before, .eingang--website .eingang__karte::before { left: 0; right: 0; top: 0; height: calc(var(--u) * 18); background: #dfe6ea; border-radius: calc(var(--u) * 10) calc(var(--u) * 10) 0 0; }
.eingang--website .eingang__karte::after { left: calc(var(--u) * 30); right: calc(var(--u) * 12); top: calc(var(--u) * 4); height: calc(var(--u) * 10); background: #fff; border-radius: 999px; }
.eingang--email .eingang__karte::after { left: calc(var(--u) * 10); top: calc(var(--u) * 6); width: calc(var(--u) * 26); height: calc(var(--u) * 6); background: #fff; border-radius: 999px; }
/* Telefon: der Zettel */
.eingang--telefon .eingang__karte { background: #ffe680; border-radius: calc(var(--u) * 2); box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 22) calc(var(--u) * -12) rgba(60, 50, 0, .5); }

/* Kundensuche am Eingang (Schritt 3) */
.kundensuche { position: absolute; right: calc(var(--u) * 14); top: calc(var(--u) * 153); width: calc(var(--u) * 400); padding: calc(var(--u) * 12); background: #fff; border-radius: calc(var(--u) * 18); box-shadow: 0 0 0 calc(var(--u) * 1) rgba(0, 40, 60, .08), 0 calc(var(--u) * 24) calc(var(--u) * 48) calc(var(--u) * -14) rgba(0, 50, 80, .45); opacity: 0; }
.kundensuche__feld { height: calc(var(--u) * 46); display: flex; align-items: center; padding: 0 calc(var(--u) * 14); border-radius: calc(var(--u) * 10); box-shadow: inset 0 0 0 calc(var(--u) * 2) var(--mitte); font-weight: 600; font-size: calc(var(--u) * var(--gross)); }
.kundensuche__hinweis { margin: calc(var(--u) * 10) calc(var(--u) * 4) calc(var(--u) * 6); font-size: calc(var(--u) * var(--klein)); color: var(--grau); }
.kundensuche__treffer { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 8); background: var(--hauch); border-radius: calc(var(--u) * 12); padding: calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 14); }
.kundensuche__treffer p { display: grid; gap: calc(var(--u) * 3); }
.kundensuche__treffer p b { font-size: calc(var(--u) * var(--gross)); }
.kundensuche__treffer p span { font-size: calc(var(--u) * var(--klein)); color: var(--grau); white-space: nowrap; }
.kundensuche__knopf { flex: none; height: calc(var(--u) * 40); display: flex; align-items: center; padding: 0 calc(var(--u) * 16); background: var(--blau); color: #fff; font-weight: 600; font-size: calc(var(--u) * var(--mittel)); border-radius: 999px; }

/* ---------- Das Blatt: Wissens-Chat (Schritt 5, Ruhebild) ---------- */
.blatt {
  position: absolute; left: calc(var(--u) * var(--fx)); top: calc(var(--u) * var(--fy));
  width: calc(var(--u) * var(--fw)); height: calc(var(--u) * var(--fh));
  display: flex; flex-direction: column; padding: calc(var(--u) * 14) calc(var(--u) * 18);
  background: #fff; border-radius: calc(var(--u) * 20);
  box-shadow: 0 0 0 calc(var(--u) * 1) rgba(0, 40, 60, .06), 0 calc(var(--u) * -8) calc(var(--u) * 30) calc(var(--u) * -14) rgba(0, 50, 80, .3), 0 calc(var(--u) * 28) calc(var(--u) * 56) calc(var(--u) * -22) rgba(0, 60, 90, .34);
}
.blatt__kopf { display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 36); font: 800 calc(var(--u) * var(--gross))/1 var(--kopf); letter-spacing: -.02em; }
.blatt__kopf img { width: calc(var(--u) * 32); height: calc(var(--u) * 32); border-radius: 50%; }
.frage { position: relative; align-self: flex-end; max-width: 82%; margin-top: calc(var(--u) * 10); padding: calc(var(--u) * 12) calc(var(--u) * 16); font-size: calc(var(--u) * 18); line-height: 1.34; color: #00263a; }
.frage__feld, .frage__blase { position: absolute; inset: 0; }
.frage__blase { background: var(--hell); border-radius: calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 5) calc(var(--u) * 18); }
.frage__feld { background: #fff; border-radius: calc(var(--u) * 18); box-shadow: inset 0 0 0 calc(var(--u) * 2) var(--mitte), 0 calc(var(--u) * 10) calc(var(--u) * 24) calc(var(--u) * -12) rgba(0, 50, 80, .4); opacity: 0; }
.antwort { margin-top: calc(var(--u) * 16); max-width: 94%; font-size: calc(var(--u) * 22); line-height: 1.3; letter-spacing: -.012em; font-weight: 500; }
.antwort > span { display: block; }
.antwort > span + span { margin-top: calc(var(--u) * 3); }
.antwort__nr { display: inline-block; color: var(--blau); }
.quelle { align-self: flex-start; margin-top: calc(var(--u) * 14); padding: calc(var(--u) * 9) calc(var(--u) * 14); font-size: calc(var(--u) * var(--klein)); line-height: 1.3; color: #00354f; background: var(--hauch); border-radius: calc(var(--u) * 12); box-shadow: inset 0 0 0 calc(var(--u) * 1.5) var(--hell); transform-origin: 0 50%; }
.quelle > span:first-child { font-weight: 600; }
.quelle b { color: var(--blau); }
.eingabe { margin-top: auto; flex: none; height: calc(var(--u) * 44); display: flex; align-items: center; justify-content: flex-end; padding: 0 calc(var(--u) * 6); background: var(--flaeche); border-radius: 999px; }
.eingabe i { position: relative; width: calc(var(--u) * 32); height: calc(var(--u) * 32); border-radius: 50%; background: var(--blau); }
.eingabe i::before { content: ""; position: absolute; left: 50%; top: 54%; width: calc(var(--u) * 9); height: calc(var(--u) * 9); margin: calc(var(--u) * -4.5) 0 0 calc(var(--u) * -4.5); border-left: calc(var(--u) * 2.4) solid #fff; border-top: calc(var(--u) * 2.4) solid #fff; transform: rotate(45deg); }

/* getippter Text: je Buchstabe ein Stück; die Schreibmarke gibt es nur im Film */
.tipp-wort { display: inline-block; white-space: nowrap; }
.tipp-marke { position: absolute; left: 0; top: 0; width: calc(var(--u) * 2); height: 1.15em; background: var(--mitte); border-radius: 1px; opacity: 0; }

/* der Zeiger des Mitarbeiters */
.zeiger { position: absolute; left: 0; top: 0; z-index: 6; opacity: 0; pointer-events: none; }
.zeiger i { position: absolute; left: calc(var(--u) * -13); top: calc(var(--u) * -13); width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: 50%; background: rgba(0, 110, 168, .3); box-shadow: inset 0 0 0 calc(var(--u) * 2) rgba(255, 255, 255, .95), 0 calc(var(--u) * 2) calc(var(--u) * 8) rgba(0, 40, 60, .35); }
.zeiger b { position: absolute; left: calc(var(--u) * 14); top: calc(var(--u) * 12); padding: calc(var(--u) * 3) calc(var(--u) * 9); background: var(--tinte); color: #fff; font-weight: 600; font-size: calc(var(--u) * var(--klein)); line-height: 1.2; border-radius: 999px; white-space: nowrap; }

/* Bis film.js die Bühne gestellt hat, bleibt die Welt verborgen – höchstens 2 s (Sicherheitsnetz). */
html.film-start .welt { visibility: hidden; animation: film-netz 1ms 2s forwards; }
@keyframes film-netz { to { visibility: visible; } }

/* ---------- Schrittleiste ---------- */
.leiste { margin-top: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: start; }
.leiste__schritte { display: flex; gap: 6px; list-style: none; }
.leiste__schritte li { flex: 1 1 0; min-width: 0; }
.leiste__schritte li:has(.ist-dran) { flex: 3.2 1 0; }
.schritt:not(.ist-dran) .schritt__titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.schritt { appearance: none; border: 0; background: transparent; width: 100%; min-height: 78px; padding: 0 10px 8px; margin: 0; border-radius: 0 0 14px 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; align-items: baseline; column-gap: 8px; text-align: left; font: inherit; color: var(--grau); cursor: pointer; transition: background-color .2s ease, transform .18s var(--feder); }
.schritt:disabled { cursor: default; }
.schritt:not(:disabled):hover { background: var(--flaeche); }
.schritt:not(:disabled):active { transform: scale(.98); transition-duration: .08s; }
.schritt__balken { grid-column: 1 / -1; height: 3px; margin: 0 -10px 9px; background: var(--linie); border-radius: 2px; overflow: hidden; }
.schritt__balken i { display: block; height: 100%; background: var(--blau); transform-origin: 0 50%; transform: scaleX(0); }
.schritt.ist-erledigt .schritt__balken i, .schritt.ist-dran .schritt__balken i { transform: scaleX(1); }
.schritt__nr { font: 800 1.75rem/1 var(--kopf); letter-spacing: -.03em; color: #5d686e; }
.schritt__wer { font-size: .875rem; font-weight: 600; }
.schritt__titel { grid-column: 1 / -1; margin-top: 3px; font-size: .9375rem; line-height: 1.28; }
.schritt.ist-erledigt .schritt__nr { color: var(--tinte); }
.schritt.ist-dran { background: var(--hauch); color: var(--tinte); }
.schritt.ist-dran .schritt__nr, .schritt.ist-dran .schritt__wer { color: var(--blau); }
.schritt.ist-dran .schritt__titel { font-weight: 600; }
.leiste__jetzt { display: none; }
.leiste__tasten { display: grid; gap: 6px; padding-top: 3px; }
.taste { appearance: none; border: 0; min-height: 44px; min-width: 124px; padding: 0 16px; border-radius: 999px; background: var(--flaeche); color: var(--tinte); font: 600 .9375rem/1 var(--text); cursor: pointer; transition: transform .18s var(--feder), background-color .2s ease; }
.taste:hover { background: var(--linie); }
.taste:active { transform: scale(.96); transition-duration: .08s; }
html:not(.js) .leiste__tasten, .leiste.ohne-bewegung .leiste__tasten { display: none; }

/* ---------- Hochkant: derselbe Film, neu komponiert ---------- */
@media (max-width: 979px) {
  .film { max-width: 620px; }
  .buehne { height: clamp(420px, calc(100svh - 404px), 600px); border-radius: 22px; }
  .welt {
    --W: 358; --H: 436;
    --fx: 12; --fy: 40; --fw: 334; --fh: 392;
    --kh: 48; --zeile: 44; --kk: 76; --gr: 46;
    --kw: 112; --kb: 160; --pl: 14;
    --gross: 20; --mittel: 15; --klein: 15;
  }
  .rahmen__kopf { padding-left: calc(var(--u) * 26); }
  .eingang { padding-left: calc(var(--u) * 14); }
  .eingang__ort { left: calc(var(--u) * 14); }
  .gruppe, .kundenkarte { padding-left: calc(var(--u) * 14); }
  .gruppe__traeger { width: calc(var(--u) * 270); }
  .rahmen__zahl, .kundenkarte__herkunft, .nur-quer { display: none; }
  .gruppe { flex-wrap: wrap; align-content: center; row-gap: calc(var(--u) * 1); }
  .gruppe__herkunft { flex-basis: 100%; margin-left: 0; }
  .kundensuche { left: calc(var(--u) * 8); right: calc(var(--u) * 8); width: auto; top: calc(var(--u) * 152); }
  .kundensuche__knopf { padding: 0 calc(var(--u) * 12); }
  .eingang__griff { padding: 0 calc(var(--u) * 12); }
  .blatt { padding: calc(var(--u) * 12) calc(var(--u) * 14); }
  .frage { max-width: 94%; padding: calc(var(--u) * 10) calc(var(--u) * 14); font-size: calc(var(--u) * 16); line-height: 1.3; }
  .antwort { max-width: 100%; margin-top: calc(var(--u) * 12); font-size: calc(var(--u) * 17); }
  .quelle { margin-top: calc(var(--u) * 10); padding: calc(var(--u) * 8) calc(var(--u) * 12); }

  .leiste { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .leiste__schritte { gap: 0; }
  .leiste__schritte li, .leiste__schritte li:has(.ist-dran) { flex: 1 1 0; }
  .schritt__balken { box-shadow: 0 0 0 1px #fff; }
  .schritt { min-height: 48px; padding: 0 0 6px; grid-template-columns: minmax(0, 1fr); justify-items: center; border-radius: 0 0 12px 12px; }
  .schritt__balken { width: 100%; margin: 0 0 7px; }
  .schritt__wer, .schritt__titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .schritt__nr { font-size: 1.5rem; }
  .leiste__jetzt { display: block; min-height: 24px; font-size: .9375rem; line-height: 1.5; text-align: center; color: var(--tinte); }
  .leiste__jetzt b { color: var(--blau); margin-right: 4px; }
  .leiste__tasten { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 2px; }
  .taste { min-width: 0; }
}

@media (prefers-contrast: more) {
  .buehne { background: #e6ebee; }
  .rahmen, .blatt, .kundensuche { box-shadow: 0 0 0 2px var(--tinte); }
}
html:not(.js) .leiste, .leiste.ohne-bewegung { grid-template-columns: minmax(0, 1fr); }

/* Schritt 3: SURA gleicht ab – woran erkannt, wer erkannt */
.rahmen__abgleich { position: absolute; right: calc(var(--u) * 20); top: 0; height: calc(var(--u) * var(--kh)); display: flex; align-items: center; font-weight: 600; font-size: calc(var(--u) * var(--mittel)); color: #00527f; opacity: 0; }
.eingang__kachel { overflow: hidden; }
.eingang__kachel i { position: absolute; left: 0; top: 0; bottom: 0; width: 42%; background: linear-gradient(90deg, rgba(201, 232, 251, 0), var(--hell) 50%, rgba(201, 232, 251, 0)); opacity: 0; }
.eingang__merkmal { position: absolute; left: calc(var(--u) * (var(--pl) + var(--kw))); top: 0; height: 100%; display: flex; align-items: center; font-weight: 600; font-size: calc(var(--u) * var(--mittel)); color: #00527f; white-space: nowrap; opacity: 0; }
.eingang__kunde { position: absolute; right: calc(var(--u) * 6); top: 50%; height: calc(var(--u) * 32); margin-top: calc(var(--u) * -16); display: flex; align-items: center; gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 12); background: #fff; color: var(--tinte); font-weight: 700; font-size: calc(var(--u) * var(--mittel)); white-space: nowrap; border-radius: 999px; box-shadow: inset 0 0 0 calc(var(--u) * 1.5) var(--hell), 0 calc(var(--u) * 6) calc(var(--u) * 12) calc(var(--u) * -6) rgba(0, 50, 80, .35); opacity: 0; }
.eingang__kunde--vorschlag { padding-right: calc(var(--u) * 3); font-weight: 600; }
.eingang__kunde--vorschlag b { height: calc(var(--u) * 26); display: flex; align-items: center; padding: 0 calc(var(--u) * 11); background: var(--blau); color: #fff; font-weight: 600; border-radius: 999px; }
@media (max-width: 979px) {
  .rahmen__abgleich { right: calc(var(--u) * 14); }
  .eingang__kunde { right: auto; left: calc(var(--u) * (var(--pl) + var(--kw) + 2)); }
}

/* Runde 3: offene Zeile, Kunde anlegen */
.nur-hoch { display: none; }
.offen { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12); top: calc(var(--u) * (var(--kh) + 6 + 6 * (var(--zeile) + 3) + 2)); height: calc(var(--u) * (var(--zeile) - 8)); display: flex; align-items: center; padding-left: calc(var(--u) * var(--pl)); border: calc(var(--u) * 1.5) dashed #8fa3ad; border-radius: calc(var(--u) * 10); color: var(--blau); font-weight: 600; font-size: calc(var(--u) * var(--mittel)); opacity: 0; }
.eingang__kunde--fehlt { color: #7a2e00; font-weight: 600; box-shadow: inset 0 0 0 calc(var(--u) * 1.5) #f0c9a8; background: #fff6ee; }
.eingang__kunde--knopf { background: var(--blau); color: #fff; font-weight: 600; box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 12) calc(var(--u) * -6) rgba(0, 50, 80, .5); }
.eingang__kunde--neu { color: #0e4a28; background: #e3f3e9; box-shadow: inset 0 0 0 calc(var(--u) * 1.5) #b5dcc4; }
.anlage { position: absolute; z-index: 3; right: calc(var(--u) * 14); top: calc(var(--u) * 148); width: calc(var(--u) * 380); padding: calc(var(--u) * 12) calc(var(--u) * 14); background: #fff; border-radius: calc(var(--u) * 18); box-shadow: 0 0 0 calc(var(--u) * 1) rgba(0, 40, 60, .08), 0 calc(var(--u) * 24) calc(var(--u) * 48) calc(var(--u) * -14) rgba(0, 50, 80, .45); display: grid; gap: calc(var(--u) * 5); opacity: 0; }
.anlage__titel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 calc(var(--u) * 10); margin-bottom: calc(var(--u) * 3); }
.anlage__titel b { font: 800 calc(var(--u) * var(--gross))/1.2 var(--kopf); letter-spacing: -.02em; }
.anlage__titel span { font-size: calc(var(--u) * var(--klein)); color: var(--grau); }
.anlage__feld { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 10); height: calc(var(--u) * 36); padding: 0 calc(var(--u) * 12); background: var(--flaeche); border-radius: calc(var(--u) * 9); font-size: calc(var(--u) * var(--mittel)); color: var(--grau); }
.anlage__feld b { color: var(--tinte); font-weight: 600; white-space: nowrap; }
@media (max-width: 979px) {
  .nur-hoch { display: inline; }
  .anlage { left: calc(var(--u) * 8); right: calc(var(--u) * 8); width: auto; top: calc(var(--u) * 150); }
  .eingang--website .eingang__kunde { left: calc(var(--u) * (var(--pl) + 84)); }
}
@media (max-width: 979px) { .zeiger b { left: auto; right: calc(var(--u) * 14); } }

/* ===== Runde 5: ein Rezept wird durchgespielt ===== */
.eingang__ring { position: absolute; left: 0; right: 0; top: calc(var(--u) * 1.5); bottom: calc(var(--u) * 1.5); border-radius: calc(var(--u) * 10); box-shadow: inset 0 0 0 calc(var(--u) * 2) var(--mitte); background: var(--hauch); opacity: 0; }
.eingang__kunde--neu { z-index: 1; }

.akte {
  --ax: 40; --aw: 1020; --wert: 20;
  position: absolute; z-index: 2; left: calc(var(--u) * var(--ax)); top: calc(var(--u) * var(--fy));
  width: calc(var(--u) * var(--aw)); height: calc(var(--u) * var(--fh));
  background: #fff; border-radius: calc(var(--u) * 20);
  box-shadow: 0 0 0 calc(var(--u) * 1) rgba(0, 40, 60, .06), 0 calc(var(--u) * 28) calc(var(--u) * 56) calc(var(--u) * -22) rgba(0, 60, 90, .34);
  opacity: 0;
}
.akte__kopf { position: absolute; left: calc(var(--u) * 22); right: calc(var(--u) * 22); top: 0; height: calc(var(--u) * 50); display: flex; align-items: center; gap: calc(var(--u) * 12); }
.akte__kopf > b { font: 800 calc(var(--u) * 22)/1 var(--kopf); letter-spacing: -.02em; }
.akte__zeit { font-size: calc(var(--u) * var(--mittel)); color: var(--grau); }
.akte__wer { display: none; font-weight: 600; font-size: calc(var(--u) * var(--mittel)); }
.akte__mail { margin-left: auto; padding: calc(var(--u) * 5) calc(var(--u) * 12); background: var(--hauch); color: #00527f; font-weight: 600; font-size: calc(var(--u) * var(--mittel)); border-radius: 999px; box-shadow: inset 0 0 0 calc(var(--u) * 1.5) var(--hell); white-space: nowrap; }
.rezeptblatt { position: absolute; left: calc(var(--u) * 22); top: calc(var(--u) * 54); width: calc(var(--u) * 210); height: calc(var(--u) * 310); background: #fbe4e6 repeating-linear-gradient(180deg, transparent 0 calc(var(--u) * 21), rgba(217, 137, 144, .35) calc(var(--u) * 21) calc(var(--u) * 22)); border-radius: calc(var(--u) * 4); box-shadow: 0 0 0 calc(var(--u) * 1) #e3a3aa, 0 calc(var(--u) * 14) calc(var(--u) * 24) calc(var(--u) * -12) rgba(0, 40, 60, .35); }
.rezeptblatt i { position: absolute; border: calc(var(--u) * 1.5) solid #d98990; border-radius: calc(var(--u) * 3); background: #fdf1f2; }
.rezeptblatt i b { position: absolute; inset: calc(var(--u) * -3); border-radius: calc(var(--u) * 5); background: rgba(0, 162, 210, .22); box-shadow: 0 0 0 calc(var(--u) * 2.5) var(--mitte); opacity: 0; }
.rezeptblatt i:nth-child(1) { left: 7%; top: 8%; width: 62%; height: 13%; }
.rezeptblatt i:nth-child(2) { left: 7%; top: 26%; width: 48%; height: 9%; }
.rezeptblatt i:nth-child(3) { left: 52%; top: 80%; width: 41%; height: 12%; }
.rezeptblatt i:nth-child(4) { left: 7%; top: 42%; width: 86%; height: 30%; }
.angaben { position: absolute; left: calc(var(--u) * 258); top: calc(var(--u) * 56); width: calc(var(--u) * 296); margin: 0; display: grid; gap: calc(var(--u) * 12); }
.angaben dt { font-size: calc(var(--u) * var(--klein)); color: var(--grau); }
.angaben dd { margin: calc(var(--u) * 1) 0 0; font-weight: 600; font-size: calc(var(--u) * var(--wert)); line-height: 1.22; letter-spacing: -.01em; }
.arbeit { position: absolute; left: calc(var(--u) * 582); top: calc(var(--u) * 56); width: calc(var(--u) * 416); height: calc(var(--u) * 314); }
.pruefung, .vorschlag-karte, .fertig { position: absolute; left: 0; right: 0; top: 0; }
.paar { position: relative; display: grid; gap: calc(var(--u) * 2); margin-bottom: calc(var(--u) * 16); }
.paar > span { font-size: calc(var(--u) * var(--klein)); color: var(--grau); }
.paar > b { font-size: calc(var(--u) * var(--wert)); line-height: 1.25; letter-spacing: -.01em; }
.paar__neu { color: #7a2e00; }
.paar__lauf { position: absolute; left: 0; right: 0; top: calc(var(--u) * 30); height: calc(var(--u) * 4); border-radius: 999px; background: var(--linie); overflow: hidden; opacity: 0; }
.paar__lauf i { position: absolute; left: 0; top: 0; bottom: 0; width: 34%; border-radius: 999px; background: var(--mitte); }
.marke-dringend, .marke-erledigt { display: inline-block; font-style: normal; font-weight: 700; font-size: calc(var(--u) * var(--klein)); line-height: 1.2; padding: calc(var(--u) * 3) calc(var(--u) * 10); border-radius: 999px; white-space: nowrap; vertical-align: calc(var(--u) * 1.5); }
.marke-dringend { background: #ba1a1a; color: #fff; margin-left: .4em; }
@media (max-width: 979px) { .marke-dringend { margin-left: 0; margin-right: .4em; } }
.marke-erledigt { background: #e3f3e9; color: #0e4a28; }
.vorschlag-karte { padding: calc(var(--u) * 16) calc(var(--u) * 18) calc(var(--u) * 14); }
.vorschlag-karte__rand { position: absolute; inset: 0; border: calc(var(--u) * 2) dashed #8fa3ad; border-radius: calc(var(--u) * 16); }
.vorschlag-karte__marke { position: relative; display: inline-block; margin-bottom: calc(var(--u) * 12); padding: calc(var(--u) * 3) calc(var(--u) * 10); background: var(--hauch); color: #00527f; font-weight: 700; font-size: calc(var(--u) * var(--klein)); border-radius: 999px; }
.frei { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 4); }
.frei > b { margin-right: auto; font: 800 calc(var(--u) * 22)/1.2 var(--kopf); letter-spacing: -.02em; }
.frei__ja, .frei__nein { height: calc(var(--u) * 40); display: flex; align-items: center; padding: 0 calc(var(--u) * 16); border-radius: 999px; font-weight: 600; font-size: calc(var(--u) * var(--mittel)); }
.frei__ja { background: var(--blau); color: #fff; }
.frei__nein { color: var(--blau); box-shadow: inset 0 0 0 calc(var(--u) * 1.5) var(--blau); }
.fertig > p { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(var(--u) * 4) calc(var(--u) * 10); min-height: calc(var(--u) * 48); padding: calc(var(--u) * 8) calc(var(--u) * 14); margin-bottom: calc(var(--u) * 8); background: var(--flaeche); border-radius: calc(var(--u) * 12); }
.fertig > p > b { font-size: calc(var(--u) * var(--wert)); letter-spacing: -.01em; }
.fertig > .fertig__schluss { background: none; padding-left: calc(var(--u) * 2); margin-top: calc(var(--u) * 14); font: 800 calc(var(--u) * 28)/1.1 var(--kopf); letter-spacing: -.03em; transform-origin: 0 50%; }

.wechsel { display: flex; flex-direction: column; }
.wechsel--1 { position: absolute; left: calc(var(--u) * 18); right: calc(var(--u) * 18); top: calc(var(--u) * 50); opacity: 0; }
.antwort > span .antwort__nr { margin-left: calc(var(--u) * 2); }

@media (max-width: 979px) {
  .akte { --ax: var(--fx); --aw: var(--fw); --wert: 17; }
  .akte__kopf { left: calc(var(--u) * 14); right: calc(var(--u) * 14); height: calc(var(--u) * 46); gap: calc(var(--u) * 8); }
  .akte__wer { display: inline; opacity: 0; }
  .rezeptblatt { left: calc(var(--u) * 14); top: calc(var(--u) * 48); width: calc(var(--u) * 306); height: calc(var(--u) * 84); }
  .rezeptblatt i:nth-child(1) { left: 4%; top: 14%; width: 44%; height: 30%; }
  .rezeptblatt i:nth-child(2) { left: 52%; top: 14%; width: 44%; height: 30%; }
  .rezeptblatt i:nth-child(3) { left: 4%; top: 56%; width: 30%; height: 30%; }
  .rezeptblatt i:nth-child(4) { left: 38%; top: 56%; width: 58%; height: 30%; }
  .angaben { left: calc(var(--u) * 14); top: calc(var(--u) * 142); width: calc(var(--u) * 306); gap: calc(var(--u) * 7); }
  .arbeit { left: calc(var(--u) * 14); top: calc(var(--u) * 54); width: calc(var(--u) * 306); height: calc(var(--u) * 326); }
  .paar > b { font-size: calc(var(--u) * 18); }
  .vorschlag-karte { padding: calc(var(--u) * 14) calc(var(--u) * 14) calc(var(--u) * 12); }
  .frei > b { flex-basis: 100%; margin-bottom: calc(var(--u) * 4); }
  .wechsel--1 { left: calc(var(--u) * 14); right: calc(var(--u) * 14); top: calc(var(--u) * 48); }
  .fertig > .fertig__schluss { font-size: calc(var(--u) * 26); }
}

/* ===== Variante 4b: gezeichnete Orte, Kanalfarben, mehr Bewegung (nur die Bühne) ===== */
.buehne { background: linear-gradient(180deg, #f8f4ed 0%, #ede7dc 100%); }
.welt {
  --f-fax: #dbe4ee; --f-rezept: #fbdfe3; --f-whatsapp: #d5f0dc; --f-email: #d3eafb; --f-website: #e6defa; --f-telefon: #ffec99;
  --k-fax: #9fb3c8; --k-rezept: #e8aab3; --k-whatsapp: #6fc08a; --k-email: #7bbcea; --k-website: #a996e6; --k-telefon: #f2c94c;
  --ow: 230; --oh: 118;
}
/* Die Orte, an denen die Eingänge heute liegen (Schritt 1). Im Ruhebild unsichtbar. */
.ort { position: absolute; left: calc(var(--u) * var(--ox)); top: calc(var(--u) * var(--oy)); width: calc(var(--u) * var(--ow)); opacity: 0; }
.ort__ding { position: relative; display: block; height: calc(var(--u) * var(--oh)); }
.ort__ding::before, .ort__ding::after, .ort__ding i, .ort__ding i::before { content: ""; position: absolute; }
.ort__name { display: block; margin-top: calc(var(--u) * 8); text-align: center; font-size: calc(var(--u) * var(--klein)); color: var(--grau); }
.ort--fax { --ox: 56; --oy: 26; }
.ort--whatsapp { --ox: 435; --oy: 18; }
.ort--email { --ox: 812; --oy: 30; }
.ort--telefon { --ox: 96; --oy: 232; }
.ort--rezept { --ox: 440; --oy: 238; }
.ort--website { --ox: 800; --oy: 226; }
/* Faxablage: Ablagekorb mit einem Blatt */
.ort--fax .ort__ding::before { left: 6%; right: 6%; top: 34%; bottom: 0; background: #c3d0de; border-radius: calc(var(--u) * 14); }
.ort--fax .ort__ding i { left: 16%; right: 16%; top: 4%; height: 70%; background: #fff; border-radius: calc(var(--u) * 5); transform: rotate(-2deg); box-shadow: 0 0 0 calc(var(--u) * 1) rgba(0, 40, 60, .08); }
.ort--fax .ort__ding::after { left: 0; right: 0; bottom: 0; height: 32%; background: var(--k-fax); border-radius: calc(var(--u) * 8) calc(var(--u) * 8) calc(var(--u) * 16) calc(var(--u) * 16); box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 24) calc(var(--u) * -12) rgba(40, 50, 70, .5); }
/* Tresen: Klemmbrett */
.ort--rezept .ort__ding::before { left: 10%; right: 10%; top: 8%; bottom: 0; background: var(--k-rezept); border-radius: calc(var(--u) * 12); box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 24) calc(var(--u) * -12) rgba(90, 40, 50, .5); }
.ort--rezept .ort__ding i { left: 17%; right: 17%; top: 20%; bottom: 8%; background: #fff7f8; border-radius: calc(var(--u) * 4); }
.ort--rezept .ort__ding::after { left: 38%; width: 24%; top: 0; height: 17%; background: #8a4d57; border-radius: calc(var(--u) * 6); }
/* Handy */
.ort--whatsapp .ort__ding::before { left: 31%; width: 38%; top: 0; bottom: 0; background: #1f2a30; border-radius: calc(var(--u) * 18); box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 24) calc(var(--u) * -12) rgba(20, 40, 30, .55); }
.ort--whatsapp .ort__ding i { left: 34%; width: 32%; top: 6%; bottom: 6%; background: var(--f-whatsapp); border-radius: calc(var(--u) * 13); }
.ort--whatsapp .ort__ding::after { left: 38%; width: 17%; top: 14%; height: 13%; background: var(--k-whatsapp); border-radius: calc(var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 1); }
/* Postfach: zwei Mails hintereinander */
.ort--email .ort__ding::before { left: 12%; right: 2%; top: 0; height: 74%; background: #c2def5; border-radius: calc(var(--u) * 10); transform: rotate(3deg); }
.ort--email .ort__ding i { left: 4%; right: 10%; top: 14%; bottom: 0; background: #fff; border-radius: calc(var(--u) * 10); box-shadow: 0 0 0 calc(var(--u) * 1) rgba(0, 40, 60, .06), 0 calc(var(--u) * 16) calc(var(--u) * 24) calc(var(--u) * -12) rgba(0, 50, 90, .45); }
.ort--email .ort__ding i::before { left: 0; right: 0; top: 0; height: 22%; background: var(--k-email); border-radius: calc(var(--u) * 10) calc(var(--u) * 10) 0 0; }
/* Formular der Website: Fenster mit Adresszeile und einem Feld */
.ort--website .ort__ding::before { left: 6%; right: 6%; top: 4%; bottom: 0; background: #fff; border-radius: calc(var(--u) * 12); box-shadow: 0 0 0 calc(var(--u) * 1) rgba(0, 40, 60, .06), 0 calc(var(--u) * 16) calc(var(--u) * 24) calc(var(--u) * -12) rgba(50, 30, 110, .45); }
.ort--website .ort__ding i { left: 6%; right: 6%; top: 4%; height: 22%; background: #cfc3f3; border-radius: calc(var(--u) * 12) calc(var(--u) * 12) 0 0; }
.ort--website .ort__ding i::before { left: 24%; right: 6%; top: 26%; bottom: 26%; background: #fff; border-radius: 999px; }
.ort--website .ort__ding::after { left: 14%; width: 44%; top: 36%; height: 15%; border: calc(var(--u) * 2) solid var(--k-website); border-radius: calc(var(--u) * 5); }
/* KI-Telefonassistent: Anrufkarte mit Sprecher und Sprachwelle */
.ort--telefon .ort__ding::before { left: 12%; right: 12%; top: 8%; bottom: 6%; background: #ffe680; border-radius: calc(var(--u) * 16); box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 22) calc(var(--u) * -12) rgba(70, 55, 0, .5); }
.ort--telefon .ort__ding i { left: 20%; top: 20%; width: calc(var(--u) * 34); height: calc(var(--u) * 34); background: #00527f; border-radius: 50%; }
.ort--telefon .ort__ding::after { left: 50%; top: 18%; width: calc(var(--u) * 44); height: calc(var(--u) * 40);
  background: linear-gradient(#8a6a0c, #8a6a0c) 0 50% / calc(var(--u) * 5) 40% no-repeat, linear-gradient(#8a6a0c, #8a6a0c) calc(var(--u) * 10) 50% / calc(var(--u) * 5) 85% no-repeat, linear-gradient(#8a6a0c, #8a6a0c) calc(var(--u) * 20) 50% / calc(var(--u) * 5) 55% no-repeat, linear-gradient(#8a6a0c, #8a6a0c) calc(var(--u) * 30) 50% / calc(var(--u) * 5) 100% no-repeat, linear-gradient(#8a6a0c, #8a6a0c) calc(var(--u) * 40) 50% / calc(var(--u) * 4) 45% no-repeat; }

/* Der Eingang als Streifen auf seinem Ort; das farbige Etikett wandert mit in die Liste */
.eingang__karte, .eingang--rezept .eingang__karte, .eingang--whatsapp .eingang__karte, .eingang--email .eingang__karte, .eingang--website .eingang__karte, .eingang--telefon .eingang__karte {
  left: 0; top: calc(var(--u) * -2); width: calc(var(--u) * var(--kb)); height: calc(var(--u) * (var(--zeile) + 4));
  background: #fff; border: 0; border-radius: calc(var(--u) * 11);
  box-shadow: 0 0 0 calc(var(--u) * 1) rgba(0, 40, 60, .07), 0 calc(var(--u) * 12) calc(var(--u) * 20) calc(var(--u) * -10) rgba(40, 40, 50, .5);
}
.eingang .eingang__karte::before, .eingang .eingang__karte::after { content: none; }
.welt { --kb: 200; }
.eingang__kanal i { display: inline-block; font-style: normal; margin-left: calc(var(--u) * -8); padding: calc(var(--u) * 4) calc(var(--u) * 8); border-radius: calc(var(--u) * 8); }
.eingang--fax .eingang__kanal i { background: var(--f-fax); }
.eingang--rezept .eingang__kanal i { background: var(--f-rezept); }
.eingang--whatsapp .eingang__kanal i { background: var(--f-whatsapp); }
.eingang--email .eingang__kanal i { background: var(--f-email); }
.eingang--website .eingang__kanal i { background: var(--f-website); }
.eingang--telefon .eingang__kanal i { background: var(--f-telefon); }
.eingang__ort { left: calc(var(--u) * (var(--kb) - 60)); top: 0; height: 100%; display: flex; align-items: center; }

/* Rezeptblatt hebt sich räumlich ab; ein Licht läuft über die Felder */
.akte { perspective: calc(var(--u) * 900); }
.rezeptschatten { position: absolute; left: calc(var(--u) * 34); top: calc(var(--u) * 350); width: calc(var(--u) * 186); height: calc(var(--u) * 14); border-radius: 50%; background: rgba(90, 40, 50, .28); filter: blur(calc(var(--u) * 7)); }
.rezeptblatt { overflow: hidden; }
.rezeptblatt s { position: absolute; left: 0; right: 0; top: calc(var(--u) * -9); height: calc(var(--u) * 18); background: linear-gradient(180deg, rgba(0, 162, 210, 0), rgba(0, 162, 210, .5) 50%, rgba(0, 162, 210, 0)); opacity: 0; }

/* Farbe in den Ergebnissen */
.paar > b.paar__neu { justify-self: start; margin-left: calc(var(--u) * -10); padding: calc(var(--u) * 4) calc(var(--u) * 10); border-radius: calc(var(--u) * 9); background: #ffe9d2; color: #8a3600; }
.paar > b.paar__gut { color: #0d6534; }
.marke-erledigt { background: #17753f; color: #fff; }
.akte__mail { background: var(--f-email); color: #00456b; box-shadow: inset 0 0 0 calc(var(--u) * 1.5) var(--k-email), 0 calc(var(--u) * 8) calc(var(--u) * 14) calc(var(--u) * -8) rgba(0, 50, 90, .45); }
.fertig > p { transform-origin: 0 50%; }

@media (max-width: 979px) {
  .welt { --kb: 132; --ow: 150; --oh: 94; }
  .ort--fax { --ox: 16; --oy: 38; }      .ort--rezept { --ox: 192; --oy: 44; }
  .ort--whatsapp { --ox: 20; --oy: 170; } .ort--email { --ox: 190; --oy: 176; }
  .ort--website { --ox: 14; --oy: 302; }  .ort--telefon { --ox: 194; --oy: 308; }
  .ort__name { margin-top: calc(var(--u) * 5); }
  .eingang__ort { display: none; }
  .rezeptschatten { left: calc(var(--u) * 30); top: calc(var(--u) * 126); width: calc(var(--u) * 274); }
  .paar > b.paar__neu { margin-left: calc(var(--u) * -8); padding: calc(var(--u) * 4) calc(var(--u) * 8); }
}

/* ===== 4c, Runde 2: Schritt 8 – die Ansicht aus Schritt 7 tritt nach links zurück, der Chat öffnet sich aus dem Chat-Knopf
   und läuft fortlaufend. Im Stylesheet steht das Ruhebild: Akte links hinten, Chat davor, Verlauf unten bündig. ===== */
.welt { --kl: 136; --bx: 430; --by: 22; --bw: 630; --bh: 384; --ax-ruhe: -170; --a-klein: .9; }
.fenster { opacity: 0; }
.akte { opacity: 1; transform-origin: 0 50%; transform: translateX(calc(var(--u) * var(--ax-ruhe))) scale(var(--a-klein)); }
.akte__schleier { position: absolute; z-index: 3; inset: 0; border-radius: calc(var(--u) * 20); background: rgba(22, 38, 50, .24); }
.pruefung, .vorschlag-karte { opacity: 0; }
.rezeptblatt i b { opacity: .35; }
.blatt { left: calc(var(--u) * var(--bx)); top: calc(var(--u) * var(--by)); width: calc(var(--u) * var(--bw)); height: calc(var(--u) * var(--bh)); z-index: 4; }
.blatt__kopf { flex: none; }
.chatknopf { position: absolute; z-index: 3; left: calc(var(--u) * (var(--bx) + var(--bw) - var(--kl))); top: calc(var(--u) * (var(--by) + var(--bh) - 104)); width: calc(var(--u) * 58); height: calc(var(--u) * 58); border-radius: 50%; background: var(--blau); box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 22) calc(var(--u) * -8) rgba(0, 50, 80, .6); opacity: 0; }
.chatknopf i { position: absolute; left: 27%; top: 28%; width: 46%; height: 34%; background: #fff; border-radius: calc(var(--u) * 7); }
.chatknopf i::after { content: ""; position: absolute; left: 14%; top: 82%; width: calc(var(--u) * 9); height: calc(var(--u) * 9); background: #fff; transform: skewX(-32deg); border-radius: 0 0 calc(var(--u) * 2) calc(var(--u) * 6); }
.chatknopf b { position: absolute; right: calc(100% + var(--u) * 10); top: 50%; transform: translateY(-50%); padding: calc(var(--u) * 5) calc(var(--u) * 12); background: #fff; color: var(--tinte); font-weight: 600; font-size: calc(var(--u) * var(--klein)); line-height: 1.2; border-radius: 999px; white-space: nowrap; box-shadow: 0 0 0 calc(var(--u) * 1) rgba(0, 40, 60, .08), 0 calc(var(--u) * 8) calc(var(--u) * 16) calc(var(--u) * -8) rgba(0, 50, 80, .4); }
/* der Verlauf: unten bündig, Älteres läuft oben hinaus; nach unten offen, damit das Schreibfeld über der Eingabe liegen kann */
.verlauf { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; margin-top: calc(var(--u) * 6); border-top: calc(var(--u) * 1) solid var(--linie); clip-path: inset(0 calc(var(--u) * -30) calc(var(--u) * -200) calc(var(--u) * -30)); }
.verlauf__band { flex: none; display: flex; flex-direction: column; padding-bottom: calc(var(--u) * 10); }
.wechsel, .wechsel--1 { position: static; opacity: 1; }
.wechsel--2 { margin-top: calc(var(--u) * 8); }
.eingabe { margin-top: 0; }
.antwort { font-size: calc(var(--u) * 20); }
@media (max-width: 979px) {
  .welt { --kl: 70; --bx: 30; --by: 58; --bw: 316; --bh: 374; --ax-ruhe: -30; --a-klein: .93; }
  .akte__wer { opacity: 1; }
  .rezeptblatt, .angaben, .rezeptschatten { opacity: 0; }
  .chatknopf { width: calc(var(--u) * 52); height: calc(var(--u) * 52); }
  .antwort { font-size: calc(var(--u) * 17); }
}

/* 4c, Runde 3: der Text zum laufenden Schritt steht groß unter der Bühne, die Schrittleiste darunter bleibt schmal */
.leiste { margin-top: 18px; }
.leiste__jetzt { display: block; order: -1; grid-column: 1 / -1; min-height: 1.25em; margin-bottom: 10px; text-align: center; font: 700 clamp(1.25rem, .9rem + 1.6vw, 1.875rem)/1.25 var(--kopf); letter-spacing: -.02em; color: var(--tinte); text-wrap: balance; }
.leiste__jetzt b { color: var(--blau); margin-right: .35em; font-weight: 700; }
.leiste__schritte li:has(.ist-dran) { flex: 1 1 0; }
.schritt .schritt__titel, .schritt.ist-dran .schritt__titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.schritt { min-height: 52px; }
@media (max-width: 760px) { .leiste { margin-top: 12px; } .leiste__jetzt { min-height: 2.5em; margin-bottom: 6px; } }