/* Startseite: der Name als Monument, die Kante als Schnitt durch jedes Bild */
.home { --m: clamp(16px, 1.8vw, 28px); --small: 14px; --mid: clamp(22px, 2.4vw, 34px); --display: clamp(40px, 5vw, 76px); }
.home .wrap { max-width: none; padding-left: var(--m); padding-right: var(--m); }
.home main { position: relative; z-index: 1; background: var(--ground); }

/* Die Kante: Bilder liegen auf Orange und sind schräg angeschnitten, das Orange bleibt als Kante stehen */
.cut { position: relative; margin: 0; --k: 34px; clip-path: polygon(0 0, calc(100% - var(--k)) 0, 100% var(--k), 100% 100%, 0 100%); }
.cut img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cut::after { content: ""; position: absolute; inset: 0; background: var(--accent); pointer-events: none; clip-path: polygon(calc(100% - var(--k) - 12px) 0, calc(100% - var(--k)) 0, 100% var(--k), 100% calc(var(--k) + 12px)); }

/* Erster Bildschirm */
.hero { position: relative; z-index: 1; background: var(--ground); min-height: 100svh; display: grid; grid-template-rows: 52svh 1fr; }
.hero-photo { height: 52svh; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 72%, 0 100%); }
.hero-photo::after { clip-path: polygon(0 calc(100% - 12px), 100% calc(72% - 12px), 100% 72%, 0 100%); }
.hero-photo img { object-position: 50% 30%; scale: 1.06; animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { from { scale: 1.06; } to { scale: 1.13; } }
.hero-nav { position: absolute; top: 24px; right: var(--m); display: flex; gap: 28px; }
.hero-nav a { font-size: 15px; font-weight: 700; text-decoration: none; color: var(--ink); padding: 8px 0; transition: color .15s; }
.hero-nav a:hover { color: var(--accent); }
.hero-band { display: flex; flex-direction: column; justify-content: space-between; padding: 0 var(--m); }
.hero-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; padding-top: 28px; }
.hero-lead { max-width: 44ch; font-size: 18px; }
.hero-actions { display: flex; align-items: center; gap: 28px; flex: none; }
.quiet { color: var(--ink-soft); font-weight: 700; font-size: 16px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(242, 140, 40, .6); transition: color .15s; }
.quiet:hover { color: var(--ink); }
.monument { font-weight: 900; font-size: clamp(88px, 23.5vw, 480px); line-height: .78; letter-spacing: -0.06em; white-space: nowrap; margin: 0 0 0 -0.035em; padding-bottom: .02em; transform-origin: 30% 100%; }
.monument span { display: inline-block; animation: rise 1.1s cubic-bezier(.2, .7, .2, 1) both; }
.monument span + span { animation-delay: 90ms; }
@keyframes rise { from { opacity: 0; translate: 0 .25em; } }

/* Einleitung */
.intro { padding-top: 168px; padding-bottom: 120px; }
.intro-head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; }
.intro-head h2 { grid-column: 1 / 8; font-weight: 400; font-size: var(--display); line-height: .95; letter-spacing: -0.03em; }
.intro-note { grid-column: 9 / 13; max-width: 40ch; }
.intro-body { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; margin-top: 120px; }
.facts { grid-column: 1 / 13; display: flex; justify-content: space-between; gap: 32px; }
.facts dt { font-size: var(--mid); line-height: 1.1; letter-spacing: -0.01em; }
.facts dd { margin-top: 8px; font-size: var(--small); color: var(--ink-soft); }
.live dt { color: var(--accent); }
.intro-said { grid-column: 1 / 6; align-self: end; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.25; letter-spacing: -0.01em; max-width: 30ch; }
.intro-photo { grid-column: 7 / 13; aspect-ratio: 4 / 3; margin-top: 72px; --k: 56px; }
.intro-photo img { object-position: 50% 30%; }

/* Orte: Reihe kleiner Rahmen, die sich beim Scrollen durchs Bild drehen */
.gallery { min-height: 92svh; display: flex; flex-direction: column; justify-content: center; gap: 28px; overflow: hidden; perspective: 1300px; }
.gal-title { padding: 0 var(--m); font-size: 22px; line-height: 1.3; }
.gal-name { font-weight: 900; }
.gal-info { color: var(--ink-soft); margin-left: .5em; }
.gal-track { display: flex; gap: 4vw; padding: 0 var(--m); width: max-content; transform-style: preserve-3d; will-change: transform; }
.frame { flex: none; width: 15vw; height: 34svh; --k: 22px; transform: rotateY(var(--ry, 0deg)); transition: scale .25s cubic-bezier(.2, .7, .2, 1); cursor: default; }
.frame:hover, .frame:focus-visible { scale: 1.08; }
.frame:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

/* Was die Stadt kann: reine Namenslisten */
.features { padding-top: 20vh; padding-bottom: 20vh; }
.features h2 { font-size: 28px; font-weight: 900; letter-spacing: -0.01em; margin-bottom: 96px; }
.feat-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.feat-col:nth-of-type(1) { grid-column: 1 / 4; }
.feat-col:nth-of-type(2) { grid-column: 4 / 7; }
.feat-col:nth-of-type(3) { grid-column: 7 / 10; }
.feat-col h3 { font-size: 17px; font-weight: 700; margin-bottom: 1.25em; }
.feat-col ul { list-style: none; padding: 0; }
.feat-col li { font-size: 17px; line-height: 1.25; padding: .22em 0; color: var(--ink-soft); transition: color .15s, translate .2s; cursor: default; }
.feat-col li:hover, .feat-col li:focus-visible, .feat-col li.on { color: var(--ink); translate: 6px 0; outline: none; }
.feat-col li:focus-visible { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.feat-sum { display: none; }
.feat-desc { grid-column: 10 / 13; grid-row: 1; font-size: 17px; min-height: 5em; padding-left: 16px; border-left: 3px solid var(--accent); }

/* So kommst du rein: eine Treppe aus Sätzen */
.stairs { padding-top: 160px; padding-bottom: 200px; }
.stairs ol { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 56px; }
.stairs li { grid-column-end: 13; }
.st-1 { grid-column-start: 1; } .st-2 { grid-column-start: 3; } .st-3 { grid-column-start: 5; } .st-4 { grid-column-start: 7; }
.st-line { font-size: clamp(36px, 4.4vw, 72px); font-weight: 900; line-height: 1; letter-spacing: -0.035em; }
.stairs li > p:not(.st-line) { margin-top: 12px; max-width: 36ch; font-size: 17px; color: var(--ink-soft); }
.accent { color: var(--accent); }
.copy { display: inline-flex; align-items: center; gap: 18px; margin-top: 18px; min-height: 52px; padding: 0 20px; border: 0; border-radius: 0; background: var(--surface-2); color: var(--ink); font: inherit; cursor: pointer; transition: background .15s, translate .15s; }
.copy:hover { background: #2e3036; }
.copy:active { translate: 0 1px; }
.copy code { background: none; padding: 0; font-size: 16px; white-space: nowrap; }
.copy-state { color: var(--accent); font-weight: 900; font-size: 15px; }
.copy.done .copy-state { color: var(--ok); }

/* Alle Regeln als Programmzettel in einer Größe */
.rules-list { background: var(--surface); padding: 24px var(--m) 160px; }
.rl-head { position: sticky; top: 0; z-index: 2; background: var(--surface); color: var(--accent); font-size: var(--mid); font-weight: 400; line-height: 1.5; margin-top: 72px; padding: 10px 0; }
.rl-row { display: grid; grid-template-columns: 33% 1fr auto; column-gap: 24px; font-size: var(--mid); line-height: 1.5; text-decoration: none; transition: color .15s, translate .2s; }
.rl-row .s { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-row .p { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.rl-row:hover, .rl-row:focus-visible { translate: 8px 0; }
.rl-row:hover .t, .rl-row:focus-visible .t, .rl-row:hover .p { color: var(--accent); }

/* Abschluss: die Farben drehen sich um */
.close-cta { min-height: 90svh; display: flex; flex-direction: column; justify-content: space-between; gap: 64px; padding: 12vh var(--m) 40px; background: var(--ink); color: var(--ground); }
.close-cta h2 { font-size: clamp(56px, 10vw, 180px); font-weight: 900; line-height: .9; letter-spacing: -0.05em; }
.cta-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.cta-row p { max-width: 40ch; font-size: 20px; line-height: 1.45; }
.close-cta .btn { min-height: 56px; }

/* Fußzeile liegt unter der Seite und wird freigelegt */
.foot { position: sticky; bottom: 0; z-index: 0; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto auto; padding: 40px var(--m) 24px; }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr 1fr 3fr; gap: 24px; font-size: 15px; }
.foot-cols p { color: var(--ink); font-weight: 700; margin-bottom: 8px; }
.foot-cols ul { list-style: none; padding: 0; display: grid; gap: 4px; color: var(--ink-soft); }
.foot-cols a { text-decoration: none; transition: color .15s; }
.foot-cols a:hover { color: var(--accent); }
.credits ul { font-size: 14px; line-height: 1.45; gap: 2px; }
.credits a { text-decoration: underline; text-underline-offset: 3px; }
.foot-mark { grid-row: 3; display: block; width: 100%; height: auto; transform-origin: 50% 100%; }
.foot-mark text { font: 900 160px Lato, sans-serif; fill: var(--ink); }
.legal { grid-row: 4; margin-top: 20px; max-width: 75ch; font-size: 14px; color: var(--ink-soft); }

/* Auftritte: Teile jedes Abschnitts nacheinander. Ohne Skript bleibt alles sichtbar */
.js .home [class*="in-"], .js .stairs li { opacity: 0; translate: 0 28px; transition: opacity .7s ease, translate .8s cubic-bezier(.2, .7, .2, 1); }
.js .home .in-2 { transition-delay: 80ms; } .js .home .in-3 { transition-delay: 160ms; } .js .home .in-4 { transition-delay: 240ms; }
.js .stairs li { translate: -48px 0; }
.js .stairs li:nth-child(2) { transition-delay: 90ms; } .js .stairs li:nth-child(3) { transition-delay: 180ms; } .js .stairs li:nth-child(4) { transition-delay: 270ms; }
.js .home .shown [class*="in-"], .js .home .shown.stairs li { opacity: 1; translate: none; }

/* Reduzierte Bewegung: Inhalte blenden nur ein, nichts wandert */
@media (prefers-reduced-motion: reduce) {
  .hero-photo img { animation: none; }
  .monument span { animation-name: fade; }
  .js .home [class*="in-"], .js .stairs li { translate: none; }
  @keyframes fade { from { opacity: 0; } }
}

@media (max-width: 1000px) {
  .hero { grid-template-rows: 60svh 1fr; }
  .hero-photo { height: 60svh; }
  .intro-head h2 { grid-column: 1 / 13; }
  .intro-note { grid-column: 1 / 13; margin-top: 24px; }
  .facts { display: grid; grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .intro-photo { grid-column: 1 / 13; }
  .intro-said { grid-column: 1 / 13; margin-top: 48px; font-size: 24px; }
  .feat-col:nth-of-type(n) { grid-column: 1 / 13; margin-bottom: 40px; }
  .feat-col li { font-size: 18px; line-height: 1.4; }
  .feat-sum { display: block; margin-top: 12px; color: var(--ink-soft); }
  .feat-desc { display: none; }
  .st-1 { grid-column-start: 1; } .st-2 { grid-column-start: 2; } .st-3 { grid-column-start: 3; } .st-4 { grid-column-start: 4; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .credits { grid-column: 1 / 3; }
}
@media (max-width: 700px) {
  .hero { grid-template-rows: 40svh 1fr; }
  .hero-photo { height: 40svh; }
  .hero-nav { gap: 20px; top: 16px; }
  .hero-nav .wide-only { display: none; }
  .hero-nav a { font-size: 14px; }
  .hero-row { flex-direction: column; gap: 20px; padding-top: 20px; }
  .hero-lead { font-size: 16px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 14px; width: 100%; }
  .hero-actions .btn { justify-content: center; }
  .hero-actions .quiet { display: none; }
  .hero-row { padding-top: 28px; }
  .hero-band { justify-content: flex-start; padding-bottom: 32px; }
  .monument { order: -1; font-size: 37vw; line-height: .8; margin-top: 24px; }
  .monument span { display: block; }
  .intro { padding-top: 96px; padding-bottom: 80px; }
  .intro-head h2 { font-size: 11vw; }
  .intro-body { margin-top: 56px; }
  .facts dt { font-size: 26px; }
  .gallery { min-height: 80svh; }
  .gal-track { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; width: auto; gap: 5vw; }
  .gal-track::-webkit-scrollbar { display: none; }
  .frame { width: 34vw; height: 30svh; scroll-snap-align: start; }
  .features h2 { font-size: 24px; margin-bottom: 48px; }
  .stairs { padding-top: 96px; padding-bottom: 120px; }
  .stairs ol { row-gap: 40px; }
  .st-line { font-size: 8.4vw; }
  .stairs li > p:not(.st-line) { font-size: 16px; }
  .copy { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; padding: 14px 18px; }
  .copy code { font-size: 14px; }
  .rl-row { grid-template-columns: 1fr auto; font-size: 22px; padding: 9px 0; }
  .rl-row .s { display: none; }
  .rl-row .p { grid-row: 1; grid-column: 2; }
  .close-cta { min-height: 80svh; }
  .close-cta h2 { font-size: 15vw; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row p { font-size: 17px; }
  .close-cta .btn { justify-content: center; }
  .foot { min-height: auto; position: relative; }
  .foot-mark { margin-top: 20svh; }
}