/* Eigenständige redaktionelle Seiten im vorhandenen Emily-Klatt-Designsystem. */
.sub-hero { min-height: min(850px, calc(100dvh - var(--head))); display: grid; grid-template-columns: minmax(0, 1fr); background: var(--ivory); }
.sub-hero-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-width: 0; padding: clamp(76px, 10vw, 148px) var(--gutter) clamp(70px, 9vw, 122px); }
.sub-kicker { margin: 0 0 28px; color: var(--cobalt); font-size: 12px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.sub-hero h1 { max-width: 11ch; margin: 0 0 30px; font-size: clamp(52px, 10.2vw, 146px); line-height: .94; letter-spacing: -.065em; text-wrap: balance; }
.sub-hero h1 em { display: block; color: var(--cobalt); }
.sub-hero-copy > p:not(.sub-kicker) { max-width: 41ch; color: var(--ink-soft); font-size: clamp(17px, 1.5vw, 22px); line-height: 1.5; }
.sub-hero-copy .actions { margin-top: 18px; }
.sub-hero-photo { min-height: 440px; position: relative; overflow: hidden; background: #e5dfdc; }
.sub-hero-photo img { width: 100%; height: 100%; min-height: 440px; max-height: 900px; object-fit: cover; object-position: 50% 22%; }
.sub-hero-photo figcaption { position: absolute; bottom: 22px; right: 26px; padding: 7px 12px; color: var(--ivory); background: #17141acc; font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.sub-hero.sub-cobalt { background: var(--cobalt); color: var(--ivory); }
.sub-hero.sub-cobalt .sub-kicker, .sub-hero.sub-cobalt h1 em { color: var(--rose); }
.sub-hero.sub-cobalt .sub-hero-copy > p:not(.sub-kicker) { color: var(--cobalt-tint); }
.sub-hero.sub-rose { background: var(--rose); }
.sub-hero.sub-rose h1 em { color: var(--cobalt); }
.sub-section { padding-block: clamp(90px, 11vw, 160px); }
.sub-section.cream { background: var(--ivory); }
.sub-section.paper { background: var(--paper); }
.sub-section.rose { background: var(--rose); }
.sub-section.cobalt { background: var(--cobalt); color: var(--ivory); }
.sub-section.cobalt em { color: var(--rose); }
.sub-section .shell { display: grid; gap: clamp(24px, 5vw, 70px); }
.sub-section h2 { max-width: 13ch; margin: 0; font-size: clamp(43px, 6vw, 84px); }
.sub-section p { max-width: 58ch; font-size: clamp(16px, 1.3vw, 20px); }
.sub-section .body { max-width: 58ch; }
.sub-section.cobalt .body { color: var(--cobalt-tint); }
.sub-number { margin: 0 0 20px; color: var(--cobalt); font: italic 400 clamp(48px, 6vw, 90px)/.8 var(--serif); }
.sub-section.cobalt .sub-number { color: var(--rose); }
.sub-grid { display: grid; gap: clamp(32px, 5vw, 88px); align-items: center; }
.sub-grid > * { min-width: 0; }
.sub-photo { width: 100%; overflow: hidden; }
.sub-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.sub-photo.wide img { aspect-ratio: 4 / 3; }
.sub-quote { padding-block: clamp(92px, 12vw, 170px); background: var(--ink); color: var(--ivory); }
.sub-quote blockquote { margin: 0; max-width: 20ch; font: italic 400 clamp(43px, 6vw, 90px)/1.05 var(--serif); letter-spacing: -.03em; text-wrap: balance; }
.sub-quote cite { display: block; margin-top: 30px; color: var(--rose); font: 700 13px var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.sub-next { padding-block: clamp(70px, 9vw, 130px); background: var(--cobalt); color: var(--ivory); }
.sub-next .shell { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 40px; }
.sub-next h2 { margin: 0; font-size: clamp(36px, 5vw, 72px); }
.sub-next h2 em { color: var(--rose); }
.sub-next .btn { background: var(--rose); color: var(--ink); }
.sub-next .btn:hover { background: var(--ivory); }
.sub-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid currentColor; }
.sub-list li { display: grid; grid-template-columns: 2.8em minmax(0, 1fr); gap: 12px; padding: 22px 0; border-bottom: 1px solid currentColor; font-size: clamp(20px, 2.3vw, 34px); font-weight: 700; letter-spacing: -.035em; line-height: 1.25; }
.sub-list li span { color: var(--cobalt); font: italic 400 1.2em/1 var(--serif); }
.sub-route { display: grid; gap: 28px; }
.sub-route article { padding: clamp(28px, 4vw, 56px); background: var(--paper); color: var(--ink); }
.sub-route article:nth-child(2) { background: var(--cobalt); color: var(--ivory); }
.sub-route article:nth-child(2) em { color: var(--rose); }
.sub-route h3 { margin-bottom: 22px; font-size: clamp(38px, 4.8vw, 68px); }
.sub-route p { max-width: 40ch; }
.sub-route ul { margin: 30px 0 0; padding: 22px 0 0; list-style: none; border-top: 1px solid currentColor; font-weight: 700; }
.sub-route li + li { margin-top: 9px; }
.sub-route li::before { content: '— '; }
.menu-links a[aria-current="page"] .ml-t { color: var(--rose); }
.menu-links a[aria-current="page"] .ml-t::after { transform: scaleX(1); }
.sub-contact-card { padding: clamp(32px, 6vw, 76px); background: var(--paper); color: var(--ink); }
.sub-contact-card a { display: inline-block; max-width: 100%; font-size: clamp(23px, 4vw, 52px); font-weight: 700; letter-spacing: -.045em; line-height: 1.2; overflow-wrap: anywhere; text-decoration-color: var(--cobalt); text-underline-offset: 8px; }
.sub-contact-card p { color: var(--ink-soft); }
.sub-contact-links { display: flex; flex-wrap: wrap; gap: 18px 30px; margin-top: 36px; font-weight: 700; }
.sub-contact-links a { font-size: 15px; font-weight: 700; letter-spacing: 0; }
@media (min-width: 900px) {
  .sub-hero { grid-template-columns: minmax(0, 52%) minmax(0, 48%); }
  .sub-hero-photo img { min-height: 100%; max-height: none; position: absolute; inset: 0; }
  .sub-section .shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sub-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sub-route { grid-template-columns: 1fr 1fr; }
  .sub-route.wide { grid-column: 1 / -1; }
  .sub-route article { min-height: 530px; display: flex; flex-direction: column; }
  .sub-route ul { margin-top: auto; }
}
@media (max-width: 899px) {
  .sub-hero { min-height: 0; }
  .sub-hero-copy { padding-top: clamp(66px, 10vw, 110px); }
  .sub-hero-photo { min-height: 0; }
  .sub-hero-photo img { min-height: 0; height: clamp(390px, 80vw, 720px); }
  .sub-hero h1 { max-width: 12ch; }
  .sub-section .shell { gap: 30px; }
}
@media (max-width: 420px) {
  .sub-hero h1 { font-size: clamp(46px, 13vw, 60px); }
  .sub-kicker { letter-spacing: .11em; }
}
/* Mobile Erzählspur: Kapitel bleiben im Dokumentfluss und das Wischen bleibt nativ. */
.mobile-story { display: none; }
@media (max-width: 899px) {
  html:has(.mobile-story) { scroll-padding-top: calc(var(--head) + 62px); }
  .mobile-story { position: fixed; z-index: 49; top: var(--head); left: 0; right: 0; min-height: 48px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 3px var(--gutter) 6px; background: #fbf8f4f2; color: var(--ink); box-shadow: 0 5px 22px #17141a12; pointer-events: none; backdrop-filter: blur(14px); }
  .mobile-story-count { color: var(--cobalt); font: italic 400 21px/1 var(--serif); letter-spacing: -.04em; white-space: nowrap; }
  .mobile-story-label { overflow: hidden; color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-story-progress { position: absolute; inset: auto 0 0; width: 100%; height: 3px; appearance: none; border: 0; border-radius: 0; background: var(--mist); }
  .mobile-story-progress::-webkit-progress-bar { background: var(--mist); }
  .mobile-story-progress::-webkit-progress-value { background: var(--hot); }
  .mobile-story-progress::-moz-progress-bar { background: var(--hot); }
  .sub-section, .sub-quote, .sub-next { position: relative; }
  .sub-section::before, .sub-quote::before, .sub-next::before { content: ''; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 3px; background: var(--hot); transform: scaleX(0); transform-origin: left; }
  .sub-section.rose::before { background: var(--cobalt); }
  .sub-section.cobalt::before, .sub-quote::before, .sub-next::before { background: var(--rose); }
  .sub-section.story-entered::before, .sub-quote.story-entered::before, .sub-next.story-entered::before { transform: scaleX(1); }
}
/* Signatur-Übergang: Die nächste Szene fährt wie eine Editorial-Karte über das Foto.
   Natives Scrollen statt Scroll-Jacking; kurze Displays bekommen den normalen Fluss. */
@media (max-width: 899px) and (min-height: 600px) {
  .has-mobile-story main > .sub-hero:has(.sub-hero-photo) { padding-bottom: 24svh; }
  .has-mobile-story main > .sub-hero > .sub-hero-photo {
    position: relative; z-index: 0;
    height: min(70svh, 680px); min-height: 0; margin: 0;
  }
  .has-mobile-story main > .sub-hero > .sub-hero-photo img { height: 100%; min-height: 0; max-height: none; }
  .has-mobile-story main > .sub-hero + .sub-section,
  .has-mobile-story main > .sub-hero + .sub-quote {
    z-index: 2; margin-top: -24svh; border-radius: 22px 22px 0 0;
    box-shadow: 0 -12px 38px #17141a20;
  }
  .has-mobile-story main > .sub-hero + .sub-section::after,
  .has-mobile-story main > .sub-hero + .sub-quote::after {
    content: ''; position: absolute; top: 18px; left: 50%; width: 42px; height: 3px;
    transform: translateX(-50%); border-radius: 3px; background: currentColor; opacity: .28;
  }
}
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  .sub-section.story-entered::before, .sub-quote.story-entered::before, .sub-next.story-entered::before { transition: transform .85s var(--ease); }
  .sub-hero-photo.story-photo-entered img { animation: sub-photo-arrive 1.05s var(--ease) both; }
  .sub-section.story-entered .shell > *, .sub-quote.story-entered .shell > *, .sub-next.story-entered .shell > * { animation: sub-scene-arrive .75s var(--ease) both; }
  .sub-section.story-entered .shell > :nth-child(2) { animation-delay: .11s; }
  .sub-route article { animation: none; }
  .sub-section.story-entered .sub-route article { animation: sub-scene-arrive .75s var(--ease) both; }
  .sub-section.story-entered .sub-route article:nth-child(2) { animation-delay: .13s; }
  @keyframes sub-photo-arrive { from { clip-path: inset(8% 5% round 18px); transform: scale(1.055); } to { clip-path: inset(0 round 0); transform: scale(1); } }
  @keyframes sub-scene-arrive { from { opacity: .55; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .sub-section::before, .sub-quote::before, .sub-next::before { transform: scaleX(1); }
}