/* Einheitliche Seiten (Udo, 13.11.2026): gleicher Seitenanfang, gleiche Abstände, gleiches Einblend-Tempo.
   Wird auf Marke, Leistungen, Referenzen und Über mich nach den Seiten-Styles geladen. */

/* Abschnitte: überall derselbe Abstand */
.block { padding: clamp(112px, 13vw, 190px) 0; }
.block-tight { padding-top: 0; }

/* Seitenanfang am Desktop: Text immer auf derselben Höhe, gleiche Größen, gleiche Breite */
@media (min-width: 861px) {
  .stage, .ref-stage.intro { min-height: 100vh; min-height: 100svh; align-items: flex-start; }
  .stage .page, .ref-stage .page { padding-top: 200px; padding-bottom: 96px; }
  .stage .kicker, .ref-stage .page-kicker { color: var(--light); font-size: 17px; font-weight: 500; margin: 0 0 20px; }
  .stage h1, .ref-stage h1 { font-size: clamp(56px, 7vw, 108px); line-height: .96; letter-spacing: -.025em; margin: 0 0 32px; max-width: min(8.5em, 50vw); }
  .stage .big, .ref-stage .big { font-size: clamp(21px, 1.8vw, 26px); line-height: 1.45; max-width: min(24em, 42vw); }
}
.ref-stage .page-kicker { color: var(--light); font-size: 17px; font-weight: 500; margin: 0 0 20px; }
/* Sprungmarken unter dem Seitenanfang (Referenzen, Leistungen) */
.jump { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 36px 0 0; font-size: 17px; }

/* Einblenden oben: überall dieselbe Reihenfolge und dasselbe Tempo */
@media (prefers-reduced-motion: no-preference) {
  .stage .kicker, .stage h1, .stage .big, .stage .tool-line, .stage .jump,
  .ref-stage .page-kicker, .ref-stage h1, .ref-stage .big, .ref-stage .jump { opacity: 0; animation: appear 1s ease forwards; }
  /* Rhythmus wie auf der Startseite (Udo, 13.11.): Überschrift, dann ruhig die Unterzeilen */
  .stage .kicker, .ref-stage .page-kicker { animation-delay: 0s; }
  .stage h1, .ref-stage h1 { animation-delay: .3s; }
  .stage .big, .ref-stage .big { animation-delay: .9s; }
  .stage .tool-line, .stage .jump, .ref-stage .jump { animation-delay: 1.3s; }
}
@keyframes appear { to { opacity: 1; } }

/* Referenzen: Foto mit beiden Händen bleibt vollständig, beginnt aber auf derselben Höhe wie die anderen Seiten */
@media (min-width: 861px) {
  .ref-stage::before { top: 108px; bottom: auto; height: calc(100% - 108px); background-position: 100% 0; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%), linear-gradient(to bottom, #000 55%, transparent 66%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0%, #000 45%), linear-gradient(to bottom, #000 55%, transparent 66%); mask-composite: intersect; }
}

/* Handy: Foto vollständig über dem Text, Text auf allen Unterseiten auf derselben Höhe */
@media (max-width: 860px) {
  .stage .scene-photo, .ref-stage .scene-photo { height: auto; aspect-ratio: 1140 / 760; margin-top: 72px; background: var(--photo) 50% 0 / contain no-repeat; -webkit-mask-image: none; mask-image: none; }
  .stage .page, .ref-stage .page { padding-top: 0; margin-top: 8px; }
  .stage h1, .ref-stage h1 { font-size: clamp(44px, 14vw, 56px); line-height: .98; margin: 0 0 24px; }
}

/* Ein gelbes Wort pro Seitenüberschrift, wie auf der Startseite (Udo, 13.11.2026) */
.stage h1 em, .ref-stage h1 em { font-style: normal; color: var(--light); }