/* Handgemacht oder KI: Kopf mit Röhrenmonitor (js/monitor.js), seit 17.10.2026.
   Links oben Kicker, H1 und Lead wie auf den anderen Leistungsseiten, rechts der Monitor als Rahmen.
   Im Monitor wird „Handgemacht“ getippt; beim Scrollen kommt der Flamingo (Puppe im Close-up) von rechts,
   stupst, der Monitor wackelt und schaltet auf „KI-gestützt“. Ohne Bewegung und im Editor: Endbild.
   Bild img/handgemacht/monitor.webp, 1231 × 1024. Glas: x 9,3–91 %, y 13,7–77,1 %. */
.mo-buehne { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; background: var(--papier);
  --mw: min(44vw, calc((100svh - var(--kopf-h) - 64px) / .832));   /* Breite des Monitors */
  --k: calc(var(--mw) * .002); }                                     /* Maßstab der Puppe je Grafik-Einheit */
.mo-kopftext { position: absolute; z-index: 4; left: var(--rand); top: calc(var(--kopf-h) + 8vh); max-width: min(40vw, 600px); }
.mo-kopftext .us-titel { font-size: clamp(44px, 5.4vw, 104px); }
.mo-kopftext .hk-wort-ki { white-space: nowrap; }   /* „KI-gestützt?“ nicht am Bindestrich trennen */
.mo-kopftext .lead { margin-top: 24px; max-width: 26em; }

.mo-monitor { position: absolute; left: calc(100% - var(--mw) - max(9vw, calc(var(--mw) * .2)));
  top: calc(var(--kopf-h) + (100% - var(--kopf-h) - var(--mw) * .832) / 2);
  width: var(--mw); aspect-ratio: 1231 / 1024; z-index: 1; transform-origin: 50% 90%; }
.mo-monitor > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.mo-glas { position: absolute; left: 9.6%; top: 14%; width: 81%; height: 62.8%; border-radius: 4.5% / 6%; overflow: hidden;
  display: grid; place-items: center; background: radial-gradient(120% 120% at 50% 45%, #1d1a20 0%, #0b090c 70%); }
/* Zeilenraster und leichte Wölbung wie bei einer Röhre */
.mo-glas::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
.mo-glas::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(90% 80% at 35% 25%, rgba(255,255,255,.09), transparent 60%), radial-gradient(140% 120% at 50% 50%, transparent 55%, rgba(0,0,0,.55)); }
.mo-text { position: relative; z-index: 1; grid-area: 1 / 1; margin: 0; white-space: nowrap; text-align: center; }
.mo-text--hand { font: 300 italic calc(var(--mw) * .1)/1 var(--serif); font-variation-settings: "opsz" 144, "SOFT" 100; color: #fff1f6;
  text-shadow: 0 0 calc(var(--mw) * .012) rgba(255, 140, 190, .75), 0 0 calc(var(--mw) * .04) rgba(237, 30, 121, .45); }
.mo-text--ki { font: 500 calc(var(--mw) * .078)/1 var(--mono); letter-spacing: -.02em; color: var(--tuerkis2);
  text-shadow: 0 0 calc(var(--mw) * .012) rgba(116, 241, 235, .8), 0 0 calc(var(--mw) * .04) rgba(116, 241, 235, .35); }
/* Endbild ohne Skript: „KI-gestützt“. Im Editor stehen beide Wörter untereinander, damit man sie bearbeiten kann. */
.mo-text--hand { visibility: hidden; }
.mo-hand-an .mo-text--hand { visibility: visible; }
.mo-hand-an .mo-text--ki { visibility: hidden; }
html.cms-an .mo-glas { grid-template-rows: auto auto; align-content: center; gap: 6%; }
html.cms-an .mo-text { grid-area: auto; }
html.cms-an .mo-text--hand, html.cms-an .mo-text--ki { visibility: visible; }
.mo-cursor { display: inline-block; width: .08em; height: .9em; margin-left: .06em; vertical-align: -.08em; background: currentColor; animation: mo-blink 1s steps(1) infinite; }
@keyframes mo-blink { 50% { opacity: 0; } }
.mo-rauschen { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.mo-blitz { position: absolute; inset: 0; z-index: 5; opacity: 0; background: #fff; pointer-events: none; }

/* Nur der Kopf der Flamingo-Puppe, ohne Hals (wie beim Stupser): Ausschnitt von img/flamingo-stups.svg
   (Box -20 50 1380 1550), x 470–780, y 170–440; der Hals ist mit clip-path abgeschnitten. Die Stirn (Grafik 555 / 225)
   steht knapp rechts neben dem Monitor auf 40 % seiner Höhe; gestupst wird, indem sich der Kopf nach vorn neigt.
   --kk: Maßstab des Kopfes je Grafik-Einheit. */
.mo-buehne { --kk: calc(var(--mw) * .0026); }   /* doppelt so groß wie anfangs (.0013), seit 18.10.2026 */
.mo-vogel { position: absolute; z-index: 3; pointer-events: none;
  left: calc(var(--mw) * 1.1 - 85 * var(--kk)); top: calc(var(--mw) * .832 * .4 - 55 * var(--kk));
  width: calc(310 * var(--kk)); height: calc(270 * var(--kk)); transform-origin: 51.6% 40.7%;
  clip-path: polygon(0 0, 66% 0, 72% 8%, 75% 18%, 75% 30%, 72% 40%, 66% 48%, 58% 55%, 50% 59%, 22.6% 100%, 0 100%); }
.mo-vogel img { position: absolute; width: calc(1380 * var(--kk)); height: auto; max-width: none;
  left: calc(-490 * var(--kk)); top: calc(-120 * var(--kk)); }
/* Hals: Wir stehen auf Fußhöhe, der Körper ist rechts oben außerhalb des Bildes. js/monitor.js zeichnet den Hals
   bei jedem Bild vom Hinterkopf (.mo-hals-ansatz) in einem Bogen nach rechts oben bis über den Bildschirmrand. */
.mo-hals { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; z-index: 2; pointer-events: none; }
.mo-hals path { fill: none; stroke: #f85488; stroke-linecap: round; stroke-width: calc(78 * var(--kk)); }
.mo-hals-ansatz { position: absolute; left: 66%; top: 36%; width: 1px; height: 1px; }
/* Platz rechts vom Monitor für den Kopf */
.mo-monitor { left: calc(100% - var(--mw) - max(9vw, calc(var(--mw) * .5))); }
@media (min-width: 901px) { .mo-buehne { --mw: min(39vw, calc((100svh - var(--kopf-h) - 64px) / .832)); } }   /* Platz für den großen Kopf */

/* Vollbild-Rahmen (js/monitor.js, nur am Desktop mit Bewegung): Monitor-Bild mit durchsichtigem Glas.
   Der Vergleich schiebt sich unter die gepinnte Bühne, damit er am Ende durch das Glas zu sehen ist. */
.mo-rahmen { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.mo-voll .mo-buehne { z-index: 2; }
.mo-voll .hk-vergleich { position: relative; z-index: 1; margin-top: -100vh; margin-top: -100svh; }
/* Im Röhrenbildschirm kompakt: der ganze Vergleich (Titel und Tabelle) passt auf einen Bildschirm, mittig im Glas,
   damit man ihn beim kurzen Halt auf einen Blick sieht */
.mo-voll .hk-vergleich { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--kopf-h) + 2vh) 0 4vh; }
.mo-voll .hk-vergleich > .rahmen { width: 100%; max-width: min(1440px, 90vw); }
.mo-voll .hk-vergleich .kicker { margin-bottom: 10px; }
.mo-voll .hk-vergleich .us-h2 { font-size: clamp(30px, min(3.6vw, 6vh), 64px); }
.mo-voll .hk-tabelle { margin-top: clamp(18px, 3.4vh, 40px); border-radius: 24px; }
.mo-voll .hk-zeile > * { padding: clamp(12px, 2.2vh, 28px) clamp(16px, 2vw, 32px); }
.mo-voll .hk-hand { font-size: clamp(16px, min(1.5vw, 2.6vh), 24px); }
.mo-voll .hk-ki { font-size: clamp(13px, min(1.15vw, 2.1vh), 18px); line-height: 1.45; background-size: 34px 34px; }
.mo-voll .hk-kopfzeile .hk-mitte { font-size: 11px; }
.mo-voll .hk-zeile:not(.hk-kopfzeile) .hk-mitte { font-size: clamp(17px, min(1.8vw, 3.1vh), 30px); }
.mo-voll .hk-kopfzeile .hk-hand { font-size: clamp(26px, min(3vw, 5.2vh), 54px); }
.mo-voll .hk-kopfzeile .hk-ki { font-size: clamp(22px, min(2.5vw, 4.4vh), 46px); }
/* Die Fragen schieben sich mit ihrer Oberkante über die Unterkante des Rahmens; danach kommt das Laufband im Kontakt */
.mo-voll .us-faq, .mo-voll .kontakt { position: relative; z-index: 31; background: var(--papier); }
.mo-voll .us-faq { box-shadow: 0 -18px 40px rgba(37, 0, 38, .1); }
.mo-rahmen-fix { position: fixed; z-index: 30; pointer-events: none; max-width: none; visibility: hidden; }

/* Am Handy: Text oben, darunter der Monitor fast bildschirmbreit, der Flamingo kleiner */
@media (max-width: 900px) {
  .mo-buehne { height: auto; min-height: 0; padding: calc(var(--kopf-h) + 4vh) 0 48px; --mw: 84vw; --k: calc(var(--mw) * .0011); }
  .mo-kopftext { position: relative; left: auto; top: auto; max-width: none; padding: 0 var(--rand); }
  .mo-monitor { position: relative; left: 4vw; top: auto; margin-top: 36px; }
  .mo-buehne { --mw: 66vw; --kk: calc(var(--mw) * .0018); }
  .mo-monitor { left: 3vw; }
  .mo-vogel { left: calc(var(--mw) * 1.02 - 85 * var(--kk)); }   /* Kopf bleibt am Handy ganz im Bild */
}
@media (prefers-reduced-motion: reduce) { .mo-cursor { animation: none; } }

/* Kleine Laptops: der Einleitungstext lief bei 1024 px unter den Monitor (21.10.2026) */
@media (min-width: 901px) and (max-width: 1200px) { .mo-kopftext { max-width: min(36vw, 600px); } }