/* lorem-simon.de, Startseite: Simon Grimms Hutablage.
   Breit: Texte scrollen links, rechts steht die Bühne mit Hutablage und Porträt.
   Hochkant oder schmal: Bühne klebt oben, Text läuft darunter. Die gleiche Abfrage steht im Script. */

.nda { display: inline-block; font: 500 0.7em/1.35 var(--mono); letter-spacing: 0.14em; background: var(--ink); color: var(--bg); padding: 0.1em 0.55em 0.06em; border-radius: 2px; transform: rotate(-2deg); vertical-align: 0.1em; }
.step > h2:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; border-radius: 4px; }

/* Raster */
.story { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(16px, 3vw, 48px); }
.steps { grid-column: 1; grid-row: 1; min-width: 0; }
.stage-wrap { grid-column: 2; grid-row: 1; position: sticky; top: 0; height: 100vh; height: 100svh; align-self: start; min-width: 0; }

/* Abschnitte */
.step { min-height: 92vh; min-height: 92svh; display: flex; flex-direction: column; justify-content: center; padding-block: 64px; scroll-margin-top: 24px; }
.step:first-child { min-height: calc(100vh - 60px); min-height: calc(100svh - 60px); padding-top: 24px; }
.step:last-child { min-height: 100vh; min-height: 100svh; }
h1 { margin: 0; font-weight: inherit; }
.name { display: block; font: 900 clamp(3.6rem, 8.4vw, 8rem)/0.84 var(--display); letter-spacing: -0.055em; }
.roles { display: block; margin-top: 1.05rem; font: 700 clamp(1.02rem, 1.5vw, 1.28rem)/1.35 var(--display); letter-spacing: -0.012em; }
.roles .pt { font-weight: 400; }
.lede { margin: 1.3rem 0 0; max-width: 34ch; font: 400 clamp(1.12rem, 1.4vw, 1.3rem)/1.5 var(--text); }
.cue { margin: 2.2rem 0 0; font: 700 clamp(1.15rem, 1.6vw, 1.4rem)/1.3 var(--display); letter-spacing: -0.015em; max-width: 26ch; }
.cue .nudge { display: inline-block; }
@media (prefers-reduced-motion: no-preference) { .cue .nudge { animation: nudge 1.8s ease-in-out infinite; } }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.jump { display: inline-block; margin-top: 1.1rem; font-size: 0.82rem; color: var(--muted); text-underline-offset: 4px; }
.jump:hover { color: var(--ink); }

h2 { margin: 0; font: 900 clamp(2.5rem, 4.8vw, 4.4rem)/0.95 var(--display); letter-spacing: -0.045em; text-wrap: balance; }
.lead { margin: 1.1rem 0 0; max-width: 36ch; font: 400 clamp(1.1rem, 1.35vw, 1.28rem)/1.48 var(--text); text-wrap: pretty; }
.lead + .lead { margin-top: 0.8rem; }
.cat { margin: 2rem 0 0.6rem; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.list { list-style: none; margin: 0; padding: 0; max-width: 26rem; border-top: 1.5px solid var(--ink); }
.list li { font: 700 clamp(1.02rem, 1.3vw, 1.14rem)/1.25 var(--display); letter-spacing: -0.01em; padding: 0.68rem 0; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: baseline; }
.list .em { flex: none; width: 1.35em; font-weight: 400; }
.nw { white-space: nowrap; }

/* Abschluss: Referenzen und Kontakt */
.block + .block { margin-top: 3rem; }
.h2s { font-size: clamp(2rem, 3.4vw, 3rem); }
.plain { list-style: none; margin: 1rem 0 0; padding: 0; font: 400 clamp(1.1rem, 1.35vw, 1.28rem)/1.5 var(--text); }
.plain strong { font-weight: 700; font-style: italic; }
.links { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.85rem; font: 700 clamp(1.05rem, 1.35vw, 1.2rem)/1.2 var(--display); letter-spacing: -0.01em; }
.links li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.links a { text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.btn { font: 700 1rem/1 var(--display); letter-spacing: -0.01em; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 999px; padding: 0.8rem 1.25rem; cursor: pointer; transition: transform 0.15s ease; display: inline-block; text-decoration: none; }
.btn:hover { transform: translateY(-1px); }
.addr { font: 500 0.86rem var(--mono); color: var(--muted); -webkit-user-select: all; user-select: all; overflow-wrap: anywhere; }

/* Bühne */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.stage { position: relative; height: 100%; margin: 0; overflow: hidden; }
.shelf { position: absolute; left: 50%; transform: translateX(-50%); top: var(--shelf-y, 15%); width: var(--shelf-w, 520px); height: 0; border-top: 2.5px solid var(--ink); transition: opacity 0.5s ease 0.3s; }
.shelf::before, .shelf::after { content: ""; position: absolute; top: -2.5px; width: 2.5px; height: 18px; background: var(--ink); transform: skewX(-24deg); }
.shelf::before { left: 22px; }
.shelf::after { right: 22px; transform: skewX(24deg); }
.shelf-label { position: absolute; right: 36px; top: 7px; font-size: 0.66rem; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }
.stage.all .shelf { opacity: 0; transition-delay: 0s; }
.stage.all .slot { visibility: hidden; }
.stage.all .sparks, .stage.all .arcfx { display: none; }
.slot { position: absolute; bottom: 0; width: var(--slot-w, 110px); height: var(--slot-h, 90px); transform: translateX(-50%); background: none; border: 0; padding: 0; cursor: pointer; border-radius: 10px; z-index: 6; }
.slot:hover, .slot:focus-visible { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.slot.empty::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 46%; height: 12px; border: 1.5px dashed var(--muted); border-bottom: 0; border-radius: 12px 12px 0 0; transform: translateX(-50%); opacity: 0.55; }
.doll { position: absolute; bottom: 0; left: 50%; height: var(--doll-h, 70%); aspect-ratio: 1000 / 987; transform: translateX(-50%); }
.doll .portrait { display: block; width: 100%; height: 100%; max-width: none; filter: grayscale(1) contrast(1.07) brightness(1.02) drop-shadow(0 14px 22px var(--shadow)); -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
/* Arbeiten mit mir: keine Hüte mehr, das Porträt wird farbig, und eine Linie in Senfgelb zieht sich vom Scheitel aus um den Sticker-Rand */
.doll .portrait-color { position: absolute; left: 0; top: 0; filter: none; opacity: 0; transition: opacity 0.6s ease; pointer-events: none; will-change: opacity; }
.stage.all .portrait-color { opacity: 1; }
.doll .contour { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; will-change: transform; }
.doll .contour path { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 0.4s ease, opacity 0.3s ease; }
.stage.all .contour path { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 1.2s cubic-bezier(.5, 0, .3, 1) 0.15s, opacity 0.1s linear 0.15s; }

/* Hüte */
.hat { position: absolute; transform-origin: 50% 80%; will-change: transform; pointer-events: none; filter: drop-shadow(0 6px 8px var(--shadow)); transition: opacity 0.45s ease; }
.stage.all .hat { opacity: 0; }
.hat svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Helm leer = dunkles Innenfutter, auf dem Kopf = Gesicht sichtbar. Handschuhe und Veilchen gibt es nur auf dem Kopf. */
.hat .interior { transition: opacity 0.2s ease; }
.hat.onhead .interior { opacity: 0; transition: opacity 0.3s ease 0.6s; }
.hat .shiner, .hat .gloves { opacity: 0; transition: opacity 0.2s ease; }
.hat .gloves { transform: translateY(-26px); }
.hat.onhead .shiner { opacity: 1; transition: opacity 0.5s ease 0.85s; }
.hat.onhead .gloves { opacity: 1; transform: none; transition: opacity 0.3s ease 0.6s, transform 0.55s cubic-bezier(.3, 1.6, .5, 1) 0.6s; }
.hat .tool { opacity: 0; transform: translateY(30px); transition: opacity 0.2s ease, transform 0.2s ease; }
.hat.onhead .tool { opacity: 1; transform: none; transition: opacity 0.3s ease 0.6s, transform 0.5s cubic-bezier(.3, 1.4, .5, 1) 0.6s; }
.hat .arcstar { transform-box: fill-box; transform-origin: center; }
/* Stempelabdruck neben dem Kopf: eigenes Element, damit er keinen Schatten wirft und nicht mitfliegt */
.stampmark { position: absolute; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; z-index: 2; }
.stampmark svg { display: block; width: 100%; height: auto; overflow: visible; }
.stampmark.on { opacity: 0.92; transition: opacity 0.01s linear 0.8s; }
.hat .fx { opacity: 0; transition: opacity 0.4s ease; }
.hat.worn .fx { opacity: 1; transition-delay: 0.55s; }
.hat .bub { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .hat.worn .bub { animation: rise 3.6s ease-in 0.6s infinite both; }
  .hat.worn .b2 { animation-delay: 1.5s; }
  .hat.worn .b3 { animation-delay: 2.4s; }
  .hat.worn .b4 { animation-delay: 3.3s; }
  .hat.worn .blink { animation: blink 1.2s ease-in-out 0.6s infinite both; }
  .stampmark.on .mark-in { animation: stampin 0.34s cubic-bezier(.2, .9, .3, 1.25) 0.8s both; }
  .hat.worn .pow { animation: pow 2.6s ease-out 0.6s infinite; }
  .hat.worn .spk { animation: spark 4.2s linear 1s infinite both; }
  .hat.worn .k2 { animation-delay: 1.18s; }
  .hat.worn .k3 { animation-delay: 1.36s; }
  .hat.worn .k4 { animation-delay: 1.54s; }
  .hat.worn .k5 { animation-delay: 1.72s; }
  .hat.worn .k6 { animation-delay: 1.90s; }
  .hat.worn .k7 { animation-delay: 1.27s; }
  .hat.worn .k8 { animation-delay: 1.45s; }
  .hat.worn .k9 { animation-delay: 1.63s; }
  .hat.worn .hot { animation: hotcycle 4.2s linear 1s infinite both; }
  .hat.worn .arcstar { animation: arccycle 4.2s linear 1s infinite both; }
  .hat.worn .embers { animation: embercycle 4.2s ease-out 1s infinite both; }
  .hat.worn .lensdark { animation: lenscycle 4.2s linear 1s infinite both; }
}
@keyframes rise { 0% { transform: translate(0, 0) scale(0.5); opacity: 0; } 12% { opacity: 0.95; } 60% { transform: translate(9px, -150px) scale(1); opacity: 0.8; } 100% { transform: translate(-3px, -250px) scale(1.15); opacity: 0; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.12; } }
@keyframes stampin { 0% { transform: scale(1.5); opacity: 0; } 70% { transform: scale(0.96); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes spark { 0% { transform: translateX(-4px) scaleX(0.6); opacity: 0; } 1% { opacity: 1; } 15%, 100% { transform: translateX(54px) scaleX(1); opacity: 0; } }
@keyframes hotcycle { 0%, 34%, 100% { opacity: 0; } 2%, 12%, 24% { opacity: 1; } 8% { opacity: 0.6; } 18% { opacity: 0.7; } 30% { opacity: 0.8; } }
@keyframes arccycle { 0%, 34%, 100% { transform: scale(0.4); opacity: 0; } 2% { transform: scale(1.1); opacity: 1; } 6% { transform: scale(0.8); } 10% { transform: scale(1.05); } 14% { transform: scale(0.85); } 18% { transform: scale(1.1); } 22% { transform: scale(0.9); } 26% { transform: scale(1.05); } 31% { transform: scale(0.9); opacity: 1; } }
@keyframes embercycle { 0% { transform: translate(0, 0); opacity: 0; } 4% { opacity: 1; } 36%, 100% { transform: translate(6px, -30px); opacity: 0; } }
@keyframes lenscycle { 0%, 38%, 100% { opacity: 0; } 1%, 34% { opacity: 0.9; } }
@keyframes pow { 0% { transform: scale(0.2) rotate(-30deg); opacity: 0; } 9% { transform: scale(1.18) rotate(6deg); opacity: 1; } 16%, 70% { transform: scale(1) rotate(0deg); opacity: 1; } 84%, 100% { transform: scale(0.5) rotate(10deg); opacity: 0; } }

/* Gestapelt nur hochkant oder sehr schmal. Querformat-Handys behalten Text links, Bühne rechts.
   scroll-padding hält Sprungziele und Tastaturfokus unterhalb der klebenden Bühne. */
@media (max-width: 899px) and (orientation: portrait), (max-width: 599px) {
  html { scroll-padding-top: calc(54vh + 12px); scroll-padding-top: calc(54svh + 12px); }
  .story { display: block; }
  .stage-wrap { height: 54vh; height: 54svh; z-index: 2; background: var(--bg); margin-inline: calc(-1 * clamp(16px, 4vw, 44px)); border-bottom: 1px solid var(--line); }
  .step { min-height: 72vh; min-height: 72svh; padding-block: 40px 56px; scroll-margin-top: 0; }
  .step:first-child { min-height: auto; padding-top: 28px; }
  .step:last-child { min-height: 76vh; min-height: 76svh; }
  .name { font-size: clamp(3.4rem, 17vw, 5.4rem); }
  .shelf-label { display: none; }
  /* Arbeiten mit mir: Ohne Regal wäre über dem Kopf zu viel Luft, also rückt das Porträt näher heran (Schultern dürfen angeschnitten sein). */
  .doll .portrait, .doll .contour { transform-origin: 50% 100%; transition: transform 0.9s cubic-bezier(.3, 0, .2, 1); will-change: transform; }
  .doll .portrait-color { transform-origin: 50% 100%; transition: opacity 0.6s ease, transform 0.9s cubic-bezier(.3, 0, .2, 1); will-change: opacity, transform; }
  .stage.all .portrait, .stage.all .portrait-color, .stage.all .contour { transform: scale(1.4); }
}
/* Sehr niedrige Displays (z. B. 320 × 568): Bühne etwas flacher, damit jeder Absatz ganz unter ihr Platz hat */
@media (max-width: 899px) and (orientation: portrait) and (max-height: 600px), (max-width: 599px) and (max-height: 600px) {
  html { scroll-padding-top: calc(50vh + 12px); scroll-padding-top: calc(50svh + 12px); }
  .stage-wrap { height: 50vh; height: 50svh; }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .hat .interior, .hat.onhead .interior { transition: none; }
  .hat .gloves, .hat.onhead .gloves, .hat .tool, .hat.onhead .tool { transform: none; }
  .doll .contour path, .stage.all .contour path { transition: opacity 0.3s ease; }
  .doll .portrait, .doll .contour { transition: none; }
  .doll .portrait-color { transition: opacity 0.6s ease; }
}

/* Farben und Schriften der Hut-Illustrationen */
.c-ink{fill:#1d2226}.c-paper{fill:#fbf8f1}
.c-mustard{fill:#e0a82e}
.c-red{fill:#d8503a}.c-red2{fill:#a93a27}.c-steel{fill:#cfd5d9}
.c-brass{fill:#c8893a}.c-brass2{fill:#a86d27}.c-brass3{fill:#e2b163}.c-port{fill:#26343a}
.c-cone{fill:#ea6a2a}.c-cone2{fill:#c4501d}.c-refl{fill:#f2f2ee}.c-flange{fill:#3a4045}.c-flange2{fill:#24292d}.c-beacon{fill:#f5c542}.c-wood{fill:#d4a46a}.c-wood2{fill:#b07f45}.c-wood3{fill:#e7c38f}.c-rubber{fill:#7d2a1f}.c-stampred{fill:#c8402e}.c-glass{fill:#d7e8ef;opacity:.16}
.c-inside{fill:#1f272d}.c-inside2{fill:#3a454d}
.s-paper{stroke:#fbf8f1}.s-ink{stroke:#1d2226}.s-red2{stroke:#a93a27}.s-wood2{stroke:#a8773f}.s-ink-red{stroke:#c8402e}
.s-brass2{stroke:#8a5a1f}.s-brass3{stroke:#e8bd72}
.c-weld{fill:#3a4148}.c-weld2{fill:#22272c}.c-weld3{fill:#4d565e}.s-weld2{stroke:#1b1f23}.c-frame{fill:#1d2125}.c-knob2{fill:#5b656c}.s-rib{stroke:#a93a27}
.c-warn{fill:#f2c230}.c-tape{fill:#eadcb4}.c-knobred{fill:#c8402e}.c-knobred2{fill:#e2735f}.c-metal{fill:#a7afb4}.s-metal{stroke:#a7afb4}.c-grip{fill:#272c31}.s-ridge{stroke:#4a535a}.s-cable{stroke:#4a535a}.s-hose{stroke:#2b3237}
.spk-o{stroke:#e4571c;stroke-width:7.5;stroke-linecap:round}.spk-i{stroke:#fff3c0;stroke-width:3.2;stroke-linecap:round}.embers{fill:#ffb52e}.lensdark{fill:#0f2a22;opacity:0}.c-tint{fill:#86c9a4;opacity:.14}.c-solar{fill:#33415a}
.bub{fill:#fbf8f1;fill-opacity:.6;stroke:#1d2226;stroke-width:1.7;stroke-opacity:.7}
.o{stroke:#1d2226;stroke-width:2.6;stroke-linejoin:round}.o-thin{stroke:#1d2226;stroke-width:1.7;stroke-linejoin:round}
.t-punch{font:900 19px var(--display);letter-spacing:.9px;fill:#fbf8f1}
.t-plate{font:900 19px var(--display);letter-spacing:2px;fill:#5a3a14}
.t-traffic{font:900 22px var(--display);letter-spacing:2px;fill:#1d2226}
.t-label{font:900 19px var(--display);letter-spacing:2.2px;fill:#c8402e}
.t-tape{font:900 17px var(--display);letter-spacing:1.4px;fill:#1d2226}
.t-markp{font:500 60px var(--text);fill:#c8402e}
.t-mark{font:900 15.5px var(--display);letter-spacing:.8px;fill:#c8402e}
.t-mark2{font:500 8px var(--mono);letter-spacing:1.2px;fill:#c8402e}