/* „Mit oder ohne KI“ auf den Leistungsseiten, als Szene (js/mensch-maschine.js).
   Greift nur, wenn das Skript .mm-an setzt: ab 900 px, mit Bewegung, nie im Editor. Sonst bleibt
   .us-wahl-paar das schlichte Paar aus css/unterseiten.css.
     Trennstrich (Webdesign, Grafik): zwei Ebenen übereinander, ein pinker Strich teilt sie. Ziehen
       oder scrollen verschiebt ihn, der Flamingo läuft mit und wird auf der Maschinenseite zum Pixel-Flamingo.
     Werkbank (Copywriting, Foto & Video): Scrollen spielt den Film. Links entsteht ein Stück von Hand,
       rechts spuckt die Maschine Varianten aus, am Ende trägt der Pixel-Flamingo zwei zur Handarbeit
       und wird unterwegs wieder rosa. */

.mm-an .kicker { opacity: 1; }
/* Strich und Flamingo sind auch Kinder des Paars: die Regel für die zwei Hälften (unterseiten.css) gilt nicht */
.us-wahl-paar > .mm-vogel, .us-wahl-paar > .mm-strich { padding: 0; min-height: 0; display: block; gap: 0; }
/* Die Bühne bleibt im Satzspiegel (.rahmen hat sonst nur Innenabstand) */
.rahmen.us-wahl-paar.mm-an { padding-inline: 0; width: min(100% - 2 * var(--rand), 1600px - 2 * var(--rand)); margin-inline: auto; }
.mm-an .us-wahl-hand .kicker { color: var(--pink); }
.mm-an .us-wahl-ki .kicker { color: var(--ice); }
.mm-vogel { position: absolute; width: 110px; aspect-ratio: 1380 / 1550; pointer-events: none; z-index: 6; }
.mm-vogel img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity .3s steps(3); }
/* Rosa Flamingo oder türkiser Pixel-Flamingo (img/flamingo-pixel.svg), Wechsel in harten Stufen */
.mm-vogel .mm-pixel { opacity: 0; image-rendering: pixelated; }
.mm-als-pixel .mm-pixel { opacity: 1; }
.mm-als-pixel .mm-rosa { opacity: 0; }
/* Auf Berry (Maschinenseite der Werkbank) mit weißer Pixelkontur, sonst verschwinden Schnabel und Füße */
.mm-werk .mm-pixel { filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff); }
.mm-zaehler { position: absolute; right: 14px; bottom: 10px; font: 500 11px/1 var(--mono); color: var(--pink); }
svg.mm-skizze { width: 100%; height: 100%; overflow: visible; }
svg.mm-skizze :is(path, rect, circle, line) { fill: none; stroke: var(--berry); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
svg.mm-skizze .mm-rot { stroke: var(--pink); stroke-width: 3; }

/* ---------- Trennstrich ---------- */
.us-wahl-paar.mm-trenn { display: block; position: relative; aspect-ratio: 16 / 8.4; border-radius: 28px; overflow: hidden;
  touch-action: pan-y; user-select: none; cursor: ew-resize; box-shadow: 0 0 0 1px var(--blass); }
.mm-trenn > .us-wahl-hand, .mm-trenn > .us-wahl-ki {
  position: absolute; inset: 0; min-height: 0; border-radius: 0; padding: 4.5% 4%;
  display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 3.5%; align-items: center; justify-content: stretch;
}
.mm-trenn > .us-wahl-hand { background: #fffaf6; color: var(--berry); }
.mm-trenn > .us-wahl-ki { background: var(--berry); color: var(--weiss); clip-path: inset(0 0 0 var(--teil, 50%)); }
.mm-trenn > .us-wahl-ki::before { display: none; }
.mm-trenn .mm-text { display: flex; flex-direction: column; gap: 12px; }
.mm-trenn .us-wahl-ki .mm-text { grid-column: 3; text-align: right; align-items: flex-end; }
.mm-trenn .us-wahl-ki .mm-text p:not(.kicker):not(.us-wahl-wort) { color: #d9cfdc; }
.mm-trenn .us-wahl-wort { font-size: clamp(36px, 4.2vw, 72px); }
.mm-trenn p:not(.kicker):not(.us-wahl-wort) { font-size: 15px; }
.mm-trenn .mm-obj { grid-column: 2; grid-row: 1; position: relative; height: 82%; align-self: center; }
.mm-trenn .us-wahl-hand .mm-text { grid-column: 1; grid-row: 1; }
.mm-strich { position: absolute; top: 0; bottom: 0; left: var(--teil, 50%); width: 0; z-index: 5; }
.mm-strich::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--pink); }
.mm-griff { position: absolute; top: 50%; left: -26px; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%;
  background: var(--pink); color: var(--weiss); display: grid; place-items: center; font: 500 18px/1 var(--mono);
  box-shadow: 0 8px 24px rgba(237, 30, 121, .4); }
.mm-strich .mm-vogel { bottom: 0; left: -58px; transition: transform .4s; }
.mm-strich.mm-links .mm-vogel { transform: scaleX(-1); }
.mm-raster { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(197,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(197,255,255,.07) 1px, transparent 1px);
  background-size: 28px 28px; }
.mm-code { height: 100%; font: 500 12px/1.65 var(--mono); color: var(--ice); overflow: hidden; border: 1px solid rgba(197,255,255,.25);
  border-radius: 12px; padding: 14px 16px; position: relative; }
.mm-code pre { margin: 0; font: inherit; white-space: pre-wrap; }
.mm-logos { height: 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; align-content: center; position: relative; }
.mm-logo { aspect-ratio: 1; border-radius: 8px; display: grid; place-items: center; font: 700 22px/1 var(--display); position: relative; overflow: hidden; }
.mm-logo::before { content: ""; position: absolute; width: 56%; height: 56%; background: var(--f); clip-path: var(--form); opacity: .95; }
.mm-logo span { position: relative; color: var(--t); }

/* ---------- Werkbank gegen Fließband ---------- */
.mm-pin { height: 300vh; position: relative; margin-top: clamp(40px, 7vh, 72px); }
.us-wahl-paar.mm-werk { position: sticky; top: calc(var(--kopf-h) + 8px); margin-top: 0; height: calc(100vh - var(--kopf-h) - 24px); }
.mm-werk > .us-wahl-hand, .mm-werk > .us-wahl-ki { min-height: 0; justify-content: center; position: relative; overflow: hidden; padding: 3.5% 5%; gap: 12px; }
.mm-werk > .us-wahl-hand { background: #fffaf6; color: var(--berry); }
.mm-werk > .us-wahl-ki { color: var(--weiss); }
.mm-werk .us-wahl-wort { font-size: clamp(40px, 4.4vw, 76px); }
.mm-werk p:not(.kicker):not(.us-wahl-wort) { font-size: 15px; }
.mm-werk .us-wahl-ki p:not(.kicker):not(.us-wahl-wort) { color: #d9cfdc; }
.mm-werkbank { width: min(330px, 85%); aspect-ratio: 4 / 3; margin-top: 10px; position: relative; flex: none; }
.mm-band { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-top: 10px; width: min(470px, 96%); }
.mm-band > * { opacity: 0; transform: scale(.4); }
.mm-band .mm-gewaehlt { outline: 2px solid var(--pink); outline-offset: 2px; }
.mm-zahl { font: 500 13px/1 var(--mono) !important; color: var(--ice) !important; margin: 0; }
.mm-ablage { display: flex; gap: 10px; min-height: 52px; align-items: center; flex-wrap: wrap; }
.mm-ablage > * { outline: 2px solid var(--pink); outline-offset: 2px; opacity: 1 !important; transform: none !important; }
.mm-werk > .mm-vogel { right: 3%; bottom: 0; width: 120px; }
/* Copywriting: Headlines */
.mm-headline { grid-column: span 2; border-radius: 4px; background: rgba(197,255,255,.1); color: var(--weiss); font: 500 9.5px/1.25 var(--mono); padding: 6px 7px; min-height: 38px; }
.mm-ablage .mm-headline { width: 180px; font-size: 11px; background: var(--weiss); color: var(--berry); }
.mm-handschrift { font: italic 400 clamp(24px, 2.3vw, 36px)/1.2 var(--serif); clip-path: inset(0 100% 0 0); margin: 0; }
.mm-handschrift--eins { white-space: nowrap; position: relative; display: inline-block; }
.mm-handschrift--zwei { color: var(--pink); font-weight: 300; margin-top: 4px; }
/* Foto & Video: gerechnete Porträts */
.mm-portraet { aspect-ratio: 4 / 5; border-radius: 4px; position: relative; overflow: hidden;
  background: radial-gradient(40% 30% at 50% 38%, var(--h) 0 60%, transparent 62%), radial-gradient(70% 45% at 50% 105%, var(--h) 0 70%, transparent 72%), linear-gradient(160deg, var(--c1), var(--c2)); }
.mm-portraet::after { content: ""; position: absolute; inset: 0; background: var(--rausch); opacity: .35; mix-blend-mode: overlay; }
.mm-ablage .mm-portraet { width: 64px; }