/* Hintergrund-Skizzen, fest seit 30.09. (Marlon hat abgenommen): Front + Junge auf dem Papier bei 'Auf dem Hof',
   Motorradschluessel mit Werkstatt-Anhaenger unter dem Handy im Ankauf. Masken aus werkzeuge/foto_skizze.py bzw.
   werkzeuge/schluessel3d.py; die Maske traegt nur die Linie, die Farbe kommt aus der Rolle */
.motiv { pointer-events: none; background: var(--farbe); opacity: var(--deckkraft);
  -webkit-mask: var(--bild) center / contain no-repeat, linear-gradient(transparent, #000 var(--einblenden, 0%), #000 var(--ausblenden, 100%), transparent);
  -webkit-mask-composite: source-in; mask: var(--bild) center / contain no-repeat, linear-gradient(transparent, #000 var(--einblenden, 0%), #000 var(--ausblenden, 100%), transparent);
  mask-composite: intersect; }
.motiv-titel { font: 400 var(--t-label) var(--zahl); letter-spacing: .14em; text-transform: uppercase; pointer-events: none; }

/* Front auf dem hellen Papier: Graphit, sitzt im klebenden Textblock unter dem Knopf, Text und Zeichnung scrollen
   gemeinsam. Hoehe = was unter dem Text im Fenster frei ist (Bestand: Textblock 301 px) */
.motiv-papier { position: relative; margin-top: 56px; --h: clamp(0px, calc(100 * var(--svh) - 104px - 301px - 56px - 44px), 480px); }
.motiv-papier .motiv-vorn { --bild: url(motive/frontal-r1-skizze-maske.webp); --farbe: var(--text); --deckkraft: 1;
  height: var(--h); aspect-ratio: 1000 / 1467; margin-left: -13px; }
/* Junge rechts neben der Maschine, von hinten, zeigt hinauf. Knie abwaerts laeuft er aus, Standlinie = Unterkante Vorderrad */
.motiv-papier .motiv-junge { --bild: url(motive/junge-skizze-maske.webp); --farbe: var(--text); --deckkraft: 1; --ausblenden: 78%;
  position: absolute; top: calc(var(--h) * .42); left: calc(var(--h) * .62); height: calc(var(--h) * .58); aspect-ratio: 700 / 1417; }
.motiv-papier .motiv-titel { margin: 12px 0 0; width: fit-content; padding-top: 6px; border-top: 1px solid currentColor; color: var(--text-2); }

/* Ankauf: Zeichenbogen UNTER dem mittigen Handy, Schluessel links, Ring und Schnur darunter, Anhaenger rechts.
   Beschriftung = echter Text auf der Kartonebene (affine Matrix aus motive/anhaenger3d.json, gesetzt in js/ankauf.js) */
#ankauf .buehne-handy { overflow: clip; }
.buehne-handy > .motiv-anhaenger { position: absolute; z-index: 1; left: 4px; top: 20px; width: calc(100% - 20px); aspect-ratio: 1400 / 1628; pointer-events: none; }
.motiv-anhaenger > .motiv { position: absolute; inset: 0; --bild: url(motive/anhaenger3d-skizze-maske.webp); --farbe: var(--linie); --deckkraft: .9; }
/* Karton in cm*100 (5,6 x 10,5 cm), die Matrix bildet ihn auf die gezeichnete Flaeche ab */
.anhaenger-text { position: absolute; left: 0; top: 0; width: 560px; height: 1050px; margin: 0; transform-origin: 0 0; color: var(--linie); }
.anhaenger-text .kopf { position: absolute; left: 44px; right: 44px; top: 178px; margin: 0; padding-bottom: 14px; border-bottom: 4px solid var(--linie-2);
  font: 400 64px/1 var(--titel); letter-spacing: .12em; text-align: center; color: var(--linie-2); }
.anhaenger-text .feld { position: absolute; left: 44px; right: 44px; height: 170px; margin: 0; border-bottom: 3px solid var(--linie-3); }
/* feste Klassen: nth-of-type zaehlte den Vordruck-Absatz mit */
.anhaenger-text .f1 { top: 290px; } .anhaenger-text .f2 { top: 480px; } .anhaenger-text .f3 { top: 670px; }
.anhaenger-text .feld > small { display: block; font: 700 40px/1 var(--zahl); letter-spacing: .1em; text-transform: uppercase; color: var(--linie-2); }
.anhaenger-text .feld > span { position: absolute; left: 8px; bottom: 6px; font: 600 96px/1 'Caveat', cursive; white-space: nowrap; rotate: -2deg; }
.anhaenger-text [data-weg] { display: none; }
.buehne-handy[data-weg="inserat"] .anhaenger-text [data-weg="inserat"], .buehne-handy[data-weg="kurvenwerk"] .anhaenger-text [data-weg="kurvenwerk"] { display: inline; }
/* Stempel nur bei Kurvenwerk, unten auf dem Karton, gleiche Machart wie die Kartei-Stempel */
.anhaenger-stempel { position: absolute; left: 170px; top: 872px; margin: 0; rotate: -9deg; display: grid; justify-items: center; padding: 14px 26px 12px;
  color: var(--markierung); border: 5px solid currentColor; box-shadow: inset 0 0 0 5px var(--papier), inset 0 0 0 8px currentColor;
  font: 700 38px/1 var(--schrift); letter-spacing: .14em; text-transform: uppercase; opacity: 0; scale: 1.6; transition: opacity .2s, scale .32s cubic-bezier(.3, 1.4, .5, 1); }
.anhaenger-stempel b { margin-top: 8px; font-size: 26px; letter-spacing: .18em; }
.buehne-handy[data-weg="kurvenwerk"] .anhaenger-stempel { opacity: .92; scale: 1; }