/* schraubklar.de: Held und das grosse Bild (die Werkstatt-Szene) */

/* ---------------------------------------------------------------
   Held
   --------------------------------------------------------------- */
.or-held { padding-top: 28px; }

.or-held-text {
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 48px; align-items: end;
}

.or-held h1 {
    font-size: clamp(36px, 5.6vw, 76px); line-height: 0.98; letter-spacing: -0.02em;
    text-shadow: 4px 4px 0 var(--flamme);
}

.or-held-neben { display: flex; flex-direction: column; gap: 18px; padding-bottom: 6px; }

/* ---------------------------------------------------------------
   Szene: Buehne und Dauerbewegung
   --------------------------------------------------------------- */
.or-szene { margin: 56px 0 0; }
.or-szene-buehne { position: relative; }
.or-szene svg { display: block; width: 100%; height: auto; }

.sz-schild { font-family: var(--schrift); font-weight: 800; font-size: 19px; fill: var(--tinte); }
.sz-led--acid { fill: var(--saeure); }
.sz-led--flame { fill: var(--flamme); }
.sz-led { animation: sz-led 1.6s steps(2, end) infinite; }
.sz-takt1 { animation-delay: -0.4s; }
.sz-takt2 { animation-delay: -0.9s; }
.sz-takt3 { animation-delay: -1.2s; }
@keyframes sz-led { 50% { opacity: .25; } }

.sz-paper { transform-box: fill-box; transform-origin: 50% 100%; animation: sz-druck 5s cubic-bezier(.5, 0, .5, 1) infinite; }
@keyframes sz-druck { 0% { scale: 1 0; } 70%, 88% { scale: 1 1; } 100% { scale: 1 1; opacity: 0; } }

.sz-steam { opacity: .7; animation: sz-dampf 2.4s ease-in-out infinite; }
@keyframes sz-dampf { 0% { opacity: 0; translate: 0 4px; } 40% { opacity: .8; } 100% { opacity: 0; translate: 0 -8px; } }

/* Die sechs Saetze der Szene laufen der Reihe nach, je drei Sekunden */
.sz-say { position: absolute; bottom: 52%; max-width: 220px; opacity: 0; transform-origin: 50% 100%; animation: sz-sagen 18s infinite; pointer-events: none; }
.sz-say--1 { left: 31%; }
.sz-say--2 { left: 61%; animation-delay: 3s; }
.sz-say--3 { left: 9%; animation-delay: 6s; }
.sz-say--4 { right: 2%; animation-delay: 9s; }
.sz-say--5 { left: 31%; animation-delay: 12s; }
.sz-say--6 { left: 9%; animation-delay: 15s; }
@keyframes sz-sagen { 0% { opacity: 0; scale: .75; } 2%, 14% { opacity: 1; scale: 1; } 16.6%, 100% { opacity: 0; scale: .9; } }

/* Das Schild pendelt am Nagel */
.sz-schild-pendel { transform-box: view-box; transform-origin: 565px 6px; animation: sz-pendel 3.6s ease-in-out infinite; }
.or-szene-buehne:hover .sz-schild-pendel { animation-duration: 1.2s; }
@keyframes sz-pendel { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }

/* ---------------------------------------------------------------
   Szene: anklickbare Dinge
   --------------------------------------------------------------- */
/* Fokus in der Szene: eine flammrote Kontur um das Gezeichnete. Kein outline,
   das folgt der Box und waere bei der Bilderwand (abgeschnittene Figuren) viel zu gross. */
.sz-ziel { cursor: pointer; outline: none; }
.sz-ziel:focus-visible {
    filter: drop-shadow(3px 0 0 var(--tinte)) drop-shadow(-3px 0 0 var(--tinte))
            drop-shadow(0 3px 0 var(--tinte)) drop-shadow(0 -3px 0 var(--tinte));
}
/* Die Tasse ist nur eine durchsichtige Trefferflaeche, ein Schatten davon waere
   unsichtbar. Sie bekommt beim Fokus eine gestrichelte Kontur. */
.sz-tasse:focus-visible { stroke: var(--tinte); stroke-width: 3; stroke-dasharray: 4 3; }
.sz-tasse { fill: transparent; }
.sz-server, .sz-drucker { transform-box: fill-box; transform-origin: 50% 100%; }

/* Server anstupsen: LED-Gewitter, Rauch, Ausrede */
.sz-rauch circle { fill: #8A8794; stroke: var(--tinte); stroke-width: 2; }
.sz-rauch { opacity: 0; }
.ist-server .sz-server { animation: sz-ruetteln .12s linear 8; }
.ist-server .sz-led { fill: var(--flamme); animation-duration: .2s; }
.ist-server .sz-rauch { animation: sz-rauch 1.6s ease-out forwards; }
@keyframes sz-ruetteln { 0%, 100% { translate: 0 0; } 25% { translate: -3px 0; } 75% { translate: 3px 0; } }
@keyframes sz-rauch { 0% { opacity: 0; translate: 0 10px; scale: .6; } 30% { opacity: .9; } 100% { opacity: 0; translate: 0 -60px; scale: 1.6; } }

/* Drucker anstupsen: ein Papierknaeuel fliegt raus und huepft weg */
.sz-knaeuel { opacity: 0; }
.ist-drucker .sz-drucker { animation: sz-huepf .3s ease-out 2; }
.ist-drucker .sz-knaeuel { animation: sz-wurf 2s cubic-bezier(.3, .7, .4, 1) forwards; }
@keyframes sz-huepf { 50% { scale: 1.04 .94; } }
@keyframes sz-wurf {
    0% { opacity: 1; translate: 0 0; rotate: 0deg; }
    25% { translate: 70px -120px; rotate: 160deg; }
    45% { translate: 130px 98px; rotate: 300deg; }
    60% { translate: 170px 40px; }
    75% { translate: 210px 98px; rotate: 520deg; }
    90% { opacity: 1; }
    100% { opacity: 0; translate: 330px 98px; rotate: 760deg; }
}

/* Kaffee nachschenken: Herzen steigen auf */
.sz-herzen path { fill: var(--flamme); stroke: var(--tinte); stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.ist-tasse .sz-herzen path { animation: sz-herz 1.8s ease-out forwards; }
.ist-tasse .sz-herzen path:nth-child(2) { animation-delay: .2s; }
.ist-tasse .sz-herzen path:nth-child(3) { animation-delay: .4s; }
@keyframes sz-herz { 0% { opacity: 0; translate: 0 10px; scale: .4; } 30% { opacity: 1; scale: 1.1; } 100% { opacity: 0; translate: 0 -70px; scale: .9; } }

/* Ein Klick auf ein Ziel zeigt dessen Ruf und blendet die laufenden Saetze kurz aus */
.sz-ruf { position: absolute; bottom: 52%; max-width: 230px; opacity: 0; pointer-events: none; transform-origin: 50% 100%; transition: opacity .2s, scale .25s cubic-bezier(.3, 1.6, .5, 1); scale: .7; }
.sz-ruf--server { left: 2%; }
.sz-ruf--uhr { left: 14%; bottom: 66%; }
.sz-ruf--zettel { left: 26%; bottom: 60%; }
.sz-ruf--tasse, .sz-ruf--melanie { left: 8%; }
.sz-ruf--tino, .sz-ruf--laptop, .sz-ruf--lampe { left: 30%; }
.sz-ruf--pflanze { left: 44%; }
.sz-ruf--drucker { left: 54%; }
.sz-ruf--janina { right: 12%; }
.sz-ruf--maja { right: 2%; }
.sz-ruf--bilder { right: 6%; bottom: 58%; }
.sz-ruf--katze { left: 36%; bottom: 20%; }
.sz-ruf--hund { right: 8%; bottom: 30%; }
.sz-ruf--fenster { left: 40%; bottom: 46%; }
.sz-ruf.ist-sichtbar { opacity: 1; scale: 1; }
.ist-ruft .sz-say { visibility: hidden; }

/* Tino schlaeft ein, wenn 25 Sekunden niemand etwas tut */
.sz-zzz text { font-family: var(--schrift); font-weight: 900; font-size: 26px; fill: var(--tinte); opacity: 0; }
.ist-muede .sz-tino .f-eyes { animation: none; scale: 1 .1; }
.ist-muede .sz-tino .f-arm-wave { animation-play-state: paused; }
.ist-muede .sz-zzz text { animation: sz-zzz 2.4s ease-in-out infinite; }
.ist-muede .sz-zzz text:nth-child(2) { animation-delay: .5s; }
.ist-muede .sz-zzz text:nth-child(3) { animation-delay: 1s; }
@keyframes sz-zzz { 0% { opacity: 0; translate: 0 10px; } 40% { opacity: 1; } 100% { opacity: 0; translate: 14px -30px; } }

/* Uhr, Zettel, Lampe, Laptop, Pflanze, Bilderwand, Katze, Personen */
.sz-uhr-sekunde { transform-box: view-box; transform-origin: 238px 68px; animation: sz-sekunde 60s steps(60) infinite; }
@keyframes sz-sekunde { to { rotate: 360deg; } }
.sz-uhr-minute, .sz-uhr-stunde { transform-box: view-box; transform-origin: 238px 68px; }
.ist-uhr .sz-uhr-minute { animation: sz-zeiger 1.2s cubic-bezier(.5, 0, .3, 1); }
.ist-uhr .sz-uhr-stunde { animation: sz-zeiger 1.2s cubic-bezier(.5, 0, .3, 1) reverse; }
.ist-uhr .sz-uhr { animation: sz-ruetteln .1s linear 6; }
@keyframes sz-zeiger { to { rotate: 720deg; } }

.sz-zettel g { transform-box: fill-box; transform-origin: 50% 0; }
.sz-zettel-1 { animation: sz-flattern 5s ease-in-out infinite; }
.sz-zettel-3 { animation: sz-flattern 6s ease-in-out -2s infinite; }
@keyframes sz-flattern { 0%, 100% { rotate: 0deg; } 50% { rotate: 4deg; } }
.ist-zettel .sz-zettel-1 { animation: sz-zettel-fall 2.2s cubic-bezier(.4, 0, .6, 1) forwards; }
@keyframes sz-zettel-fall {
    0% { translate: 0 0; rotate: 0deg; }
    30% { translate: 20px 90px; rotate: 50deg; }
    60% { translate: -10px 190px; rotate: -30deg; opacity: 1; }
    75% { translate: 10px 262px; rotate: 80deg; opacity: 1; }
    80% { opacity: 0; translate: 0 0; rotate: 0deg; }
    100% { opacity: 1; }
}

.sz-lampe-licht { opacity: .45; transition: opacity .15s; }
.ist-lampe-aus .sz-lampe-licht { opacity: 0; }
.ist-lampe .sz-lampe { animation: sz-huepf .25s ease-out 2; transform-box: fill-box; transform-origin: 50% 100%; }

.sz-fortschritt { opacity: 0; }
.sz-fortschritt-balken { transform-box: fill-box; transform-origin: 0 50%; scale: 0 1; }
.ist-laptop .sz-fortschritt { opacity: 1; }
.ist-laptop .sz-fortschritt-balken { animation: sz-laden 2.2s steps(7, end) forwards; }
@keyframes sz-laden { 0% { scale: 0 1; } 80% { scale: .92 1; } 100% { scale: 1 1; } }

.sz-pflanze-blaetter { transform-box: fill-box; transform-origin: 50% 100%; animation: sz-wiegen 4s ease-in-out infinite; }
.ist-pflanze .sz-pflanze-blaetter { animation: sz-tanzen .3s ease-in-out 6; }
@keyframes sz-wiegen { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
@keyframes sz-tanzen { 0%, 100% { rotate: -12deg; } 50% { rotate: 12deg; } }

/* Bilderwand. Drehpunkt ist der Nagel (oberste Kante der Box). */
.sz-rahmen { transform-box: fill-box; transform-origin: 50% 0; }
.sz-rahmen-figur { transition: translate .35s cubic-bezier(.3, 1.8, .5, 1); }
.sz-rahmen-bild { transform-box: fill-box; transform-origin: 50% 50%; }
.sz-rahmen-foto { opacity: 0; }
/* Feste Trefferflaeche: dreht sich das Bild weg, bleibt die Maus trotzdem drauf. */
.sz-rahmen-flaeche { fill: transparent; }
/* Drueberfahren: jedes Bild hat seine eigene Nummer.
   Tino schaukelt am Nagel und lehnt sich oben raus. Janina dreht sich wie ein
   Propeller um die Bildmitte (30/40 = Mitte des Rahmens, gemessen ab Nagelspitze).
   Maja springt vom Nagel und winkt oben raus. Melanie haengt schief, ihre Figur
   rutscht in die untere Ecke. */
.sz-rahmen-halter:hover > .sz-rahmen--tino { animation: sz-rahmen-schaukeln 1.1s ease-out; }
.sz-rahmen-halter:hover > .sz-rahmen--tino .sz-rahmen-figur { translate: 0 -15px; }
.sz-rahmen-halter:hover > .sz-rahmen--janina { transform-origin: 30px 40px; animation: sz-rahmen-propeller .9s cubic-bezier(.3, 1.3, .5, 1); }
.sz-rahmen-halter:hover > .sz-rahmen--maja { animation: sz-rahmen-sprung .8s cubic-bezier(.3, 1.6, .5, 1); }
.sz-rahmen-halter:hover > .sz-rahmen--maja .sz-rahmen-figur { translate: 4px -16px; rotate: 10deg; }
.sz-rahmen--melanie { transition: rotate .5s cubic-bezier(.3, 1.8, .5, 1); }
.sz-rahmen-halter:hover > .sz-rahmen--melanie { rotate: 21deg; }
.sz-rahmen--melanie .sz-rahmen-figur { transition: translate .6s cubic-bezier(.5, 0, .7, 1) .15s, rotate .6s ease-in .15s; }
.sz-rahmen-halter:hover > .sz-rahmen--melanie .sz-rahmen-figur { translate: -9px 5px; rotate: 18deg; }
@keyframes sz-rahmen-schaukeln {
    0%, 100% { rotate: 0deg; } 15% { rotate: 14deg; } 35% { rotate: -10deg; }
    55% { rotate: 6deg; } 75% { rotate: -3deg; }
}
@keyframes sz-rahmen-propeller { 0% { rotate: 0deg; } 100% { rotate: 360deg; } }
@keyframes sz-rahmen-sprung {
    0%, 100% { translate: 0 0; } 30% { translate: 0 -12px; rotate: -6deg; }
    60% { translate: 0 0; rotate: 4deg; } 80% { translate: 0 -3px; rotate: 0deg; }
}
/* Klick: Die Bilder drehen sich nacheinander um, hinten klebt das echte Foto.
   Melanies Rahmen rutscht dabei vom Nagel und haengt kurz schief. */
.ist-bilder .sz-rahmen-bild { animation: sz-rahmen-wenden 2.3s ease-in-out both; }
.ist-bilder .sz-rahmen-foto { animation: sz-rahmen-foto 2.3s step-end both; }
.ist-bilder .sz-rahmen--janina :is(.sz-rahmen-bild, .sz-rahmen-foto) { animation-delay: .12s; }
.ist-bilder .sz-rahmen--maja :is(.sz-rahmen-bild, .sz-rahmen-foto) { animation-delay: .24s; }
.ist-bilder .sz-rahmen--melanie :is(.sz-rahmen-bild, .sz-rahmen-foto) { animation-delay: .36s; }
.ist-bilder .sz-rahmen--melanie { animation: sz-rahmen-plumps 2.4s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes sz-rahmen-wenden {
    0%, 100% { scale: 1 1; } 12% { scale: 0 1; } 24%, 76% { scale: 1 1; } 88% { scale: 0 1; }
}
@keyframes sz-rahmen-foto { 0% { opacity: 0; } 12% { opacity: 1; } 88% { opacity: 0; } }
@keyframes sz-rahmen-plumps {
    0%, 55% { rotate: 0deg; translate: 0 0; } 62% { rotate: 0deg; translate: 0 10px; }
    72% { rotate: 38deg; translate: 0 10px; } 82%, 92% { rotate: 24deg; translate: 0 10px; }
    100% { rotate: 0deg; translate: 0 0; }
}

/* Die Katze schleicht alle 30 Sekunden einmal durchs Bild, von links nach
   rechts (ihr Kopf zeigt nach rechts, sie laeuft also vorwaerts) */
.sz-katze-weg { animation: sz-schleichen 30s linear infinite; }
.sz-katze-weg:hover, .sz-katze-weg:focus-within { animation-play-state: paused; }
@keyframes sz-schleichen { 0%, 55% { translate: -120px 0; } 100% { translate: 1060px 0; } }

/* Der Hund neben Janina wedelt; angeklickt huepft er und wedelt doppelt so schnell */
.sz-hund-schwanz { transform-box: fill-box; transform-origin: 0% 100%; animation: sz-wedeln .45s ease-in-out infinite alternate; }
@keyframes sz-wedeln { from { rotate: -14deg; } to { rotate: 16deg; } }
.ist-hund .sz-hund { transform-box: fill-box; transform-origin: 50% 100%; animation: sz-katzensprung .45s cubic-bezier(.3, 1.6, .5, 1) 2; }
.ist-hund .sz-hund-schwanz { animation-duration: .18s; }

/* Fenster: Wolke zieht, beim Klick fliegt ein Vogel vorbei. Ist das Licht aus
   (Lampe, .ist-lampe-aus an der Buehne), ist draussen Nacht: dunkler Himmel,
   Mond und Sterne statt Sonne und Wolke. */
.sz-wolke { animation: sz-wolke 24s linear infinite alternate; }
@keyframes sz-wolke { from { translate: -40px 0; } to { translate: 40px 0; } }
.sz-vogel { opacity: 0; }
.ist-fenster .sz-vogel { animation: sz-vogel 1.8s ease-in-out; }
@keyframes sz-vogel { 0% { opacity: 1; translate: -20px 10px; } 50% { translate: 50px -12px; } 100% { opacity: 1; translate: 120px 4px; } }
.sz-mond { display: none; }
.ist-lampe-aus .sz-himmel { fill: #2A2832; }
.ist-lampe-aus .sz-sonne, .ist-lampe-aus .sz-wolke { display: none; }
.ist-lampe-aus .sz-mond { display: inline; }

/* Ueber dem grossen Bild wird der Mauszeiger zum kleinen Roten mit Tinos Muetze (dem Signet) */
.or-szene-buehne svg, .or-szene-buehne .sz-ziel { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 64 64'%3E%3Crect x='23' y='23' width='22' height='34' fill='%23111010'/%3E%3Crect x='20' y='20' width='22' height='34' fill='%23FF4D18' stroke='%23111010' stroke-width='3'/%3E%3Crect x='24.5' y='31' width='4' height='5' fill='%23F4F1E8'/%3E%3Crect x='33.5' y='31' width='4' height='5' fill='%23F4F1E8'/%3E%3Cpath d='M16 22c0-11 6-17 15-17s15 6 15 17z' fill='%23111010'/%3E%3Crect x='14' y='19' width='34' height='6' rx='1' fill='%23111010'/%3E%3C/svg%3E") 15 3, pointer; }

/* Licht aus: die ganze Seite wird dunkel, die Maus ist die Taschenlampe
   (script.js setzt --licht-x und --licht-y; ohne Maus steht der Lichtfleck auf der Lampe) */
html.ist-dunkel body::after {
    content: ""; position: fixed; inset: 0; z-index: 45; pointer-events: none;
    background: radial-gradient(circle 120px at var(--licht-x, 50%) var(--licht-y, 50%), rgba(10, 9, 12, 0) 0, rgba(10, 9, 12, .35) 65%, rgba(10, 9, 12, .9) 100%);
    animation: sz-dunkel .35s ease-out;
}
@keyframes sz-dunkel { from { opacity: 0; } }
.sz-bein-a { animation: sz-pfote .4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 0; }
.sz-bein-b { animation: sz-pfote .4s ease-in-out infinite alternate-reverse; transform-box: fill-box; transform-origin: 50% 0; }
.sz-katze-schwanz { transform-box: fill-box; transform-origin: 100% 100%; animation: sz-schwanz 1.2s ease-in-out infinite alternate; }
@keyframes sz-pfote { from { rotate: -14deg; } to { rotate: 14deg; } }
@keyframes sz-schwanz { from { rotate: -10deg; } to { rotate: 18deg; } }
.ist-katze .sz-katze { animation: sz-katzensprung .5s cubic-bezier(.3, 1.6, .5, 1); transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes sz-katzensprung { 50% { translate: 0 -30px; } }

/* Personen in der Szene huepfen beim Anklicken */
.sz-person { transform-box: fill-box; transform-origin: 50% 100%; }
.ist-tino .sz-person--tino, .ist-melanie .sz-person--melanie,
.ist-janina .sz-person--janina, .ist-maja .sz-person--maja { animation: sz-hops .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes sz-hops { 40% { translate: 0 -18px; } }