/* Gemeinsame Papieranimation. Mobil folgt der Weihnachtsblock direkt auf die Einführung. */
.paper-home { --holiday-red: #c3342c; overflow-x: clip; }
.paper-refined[hidden] { display: none; }
.paper-refined .holiday-paper { display: flex; }
.paper-refined .paper-object { position: relative; flex: none; }
.paper-refined .holiday-link { display: inline-flex; align-items: center; min-height: 44px; width: fit-content; font-weight: 450; text-decoration-color: var(--season); text-underline-offset: 7px; text-decoration-thickness: 1px; transition: color 160ms ease, text-decoration-color 160ms ease; }
.paper-keep { white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .paper-refined .holiday-link:hover { color: var(--teal); text-decoration-color: var(--teal); } }
@media (prefers-reduced-motion: reduce) { .paper-refined .holiday-link { transition: none; } }
/* Zwei zusammengehörige Spalten: Einführung und Saisonhinweis links, echte Arbeiten rechts. */
.paper-home .home-hero.has-paper { grid-template-areas: "intro work" "season work"; grid-template-rows: auto auto; row-gap: 40px; align-items: start; }
.paper-home .home-hero.has-paper .hero-copy { grid-area: intro; }
.paper-home .home-hero.has-paper .hero-stage { grid-area: work; align-self: center; }
.paper-refined { --motion-ease-fold: cubic-bezier(.77, 0, .175, 1); grid-area: season; min-width: 0; width: calc(100% - 24px); max-width: 560px; margin: 0 0 0 24px; }
.paper-refined .holiday-paper { height: auto; min-height: 200px; gap: 24px; justify-content: flex-start; align-items: flex-end; }
.paper-refined .paper-object { width: 180px; height: 180px; perspective: 900px; }
.paper-message { flex: 1; min-width: 0; padding-block: 12px; }
.paper-message h2 { font-size: clamp(27px, 2.35vw, 34px); font-weight: 400; line-height: 1.13; letter-spacing: -.022em; }
/* Die dunkle Schrift bleibt während des Farbauftrags vollständig lesbar. */
.paper-emphasis { display: inline-grid; white-space: nowrap; }
.paper-emphasis > span { grid-area: 1 / 1; }
.paper-ink-base { color: var(--ink); }
.paper-ink-pass { color: var(--holiday-red); clip-path: none; pointer-events: none; }
.paper-message p { max-width: none; text-wrap: wrap; margin-top: 12px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.paper-message .holiday-link { margin-top: 12px; font-size: 18px; letter-spacing: 0; }
.paper-refined .paper-base-hinge { transform-origin: 50% 91%; }
.paper-refined .paper-layer { backface-visibility: hidden; }
@media (max-width: 1100px) {
  .paper-refinement .motion-lab-title { display: none; }
  .paper-refined { width: 100%; margin-left: 0; }
  .paper-refined .holiday-paper { gap: 16px; align-items: center; }
  .paper-refined .paper-object { width: 140px; height: 140px; }
  .paper-desktop-break { display: none; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .paper-refined .holiday-paper { gap: 12px; }
  .paper-refined .paper-object { width: 104px; height: 104px; }
  .paper-message h2 { font-size: 24px; }
  .paper-message .holiday-link { font-size: 16px; white-space: normal; }
}
@media (max-width: 760px) {
  .paper-home .home-hero.has-paper { grid-template-areas: "intro" "season" "work"; grid-template-rows: auto; row-gap: 28px; }
  .paper-home .home-hero.has-paper .hero-stage { height: clamp(250px, 60vw, 400px); }
  .paper-refined { max-width: 540px; margin: 0 auto; }
  .paper-refined .holiday-paper { gap: 16px; min-height: 180px; align-items: center; }
  .paper-refined .paper-object { width: clamp(100px, 29vw, 180px); height: clamp(100px, 29vw, 180px); }
  .paper-message h2 { font-size: clamp(23px, 4.6vw, 29px); }
  .paper-message p { font-size: 14px; margin-top: 10px; }
  .paper-message .holiday-link { font-size: 16px; white-space: normal; margin-top: 8px; }
  .paper-desktop-break { display: none; }
  .paper-refinement .motion-choices { margin: 0; }
}
@media (max-width: 360px) {
  .paper-refined .holiday-paper { gap: 10px; }
  .paper-refined .paper-object { width: 82px; height: 82px; }
  .paper-message h2 { font-size: 22px; }
}

/* Lokale räumliche Papierstudie. Das bestehende Einstiegsraster bleibt die Basis. */
.paper-spatial { isolation: isolate; }
.paper-spatial .paper-fallback, .paper-spatial .paper-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.paper-spatial .paper-canvas { display: none; }
.paper-spatial.is-built .paper-canvas { display: block; }
.paper-spatial.is-built .paper-fallback { display: none; }

/* Nur die lokale Vergleichsleiste; keine zusätzlichen Bedienelemente im Motiv. */
.motion-actions { gap: 10px; flex-wrap: wrap; }
#motion-slow { padding-inline: 10px; }
#motion-slow[aria-pressed="true"] { background: var(--teal); color: white; border-color: var(--teal); }
@media (min-width: 761px) and (max-width: 1050px) {
  .motion-lab-inner { flex-wrap: wrap; }
  .motion-actions { margin-left: auto; }
}
@media (max-width: 760px) { .motion-actions { gap: 2px 10px; } }

/* The incoming sheet may cross the left page edge, without widening the page. */


/* One visible glyph layer at rest avoids the dark antialiasing fringe from
   drawing coral text over the same dark text. The dark base is only needed
   while the colour pass is running. Also applies to the no-JS fallback. */
.paper-clean-finish .paper-ink-base { color: var(--holiday-red); }
.paper-clean-finish .paper-ink-pass { visibility: hidden; }
.paper-clean-finish[data-state="playing"] .paper-ink-base { color: var(--ink); }
.paper-clean-finish[data-state="playing"] .paper-ink-pass { visibility: visible; }