/* Nur die neue Übersicht; das gemeinsame Designsystem bleibt unverändert. */
.storiesPage { background: var(--cream); }
.storiesContainer { width: min(1220px, calc(100% - 12vw)); margin-inline: auto; }
.storiesSkipLink { position: absolute; top: -80px; left: 20px; z-index: 30; padding: 14px 18px; background: var(--paper); color: var(--purple-dark); }
.storiesSkipLink:focus { top: 12px; outline: 2px solid var(--purple-dark); }
.storiesIntro { padding-block: clamp(35px, 4vw, 58px) clamp(44px, 5vw, 70px); }
.storiesBackLink { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 34px; color: var(--muted); font-size: 11px; text-decoration: underline; text-underline-offset: 4px; }
.storiesEyebrow { margin: 0 0 18px; color: var(--purple-dark); font-size: 10px; font-weight: 700; line-height: 1.5; letter-spacing: .16em; text-transform: uppercase; }
.storiesIntro h1 { max-width: 1040px; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(42px, 5.4vw, 76px); font-weight: 400; line-height: 1.08; letter-spacing: -.035em; hyphens: manual; }
.storiesIntro h1 span { color: var(--purple); }
.storiesIntro .scriptLabel { margin: 24px 0 17px; font-size: clamp(22px, 2.2vw, 30px); }
.storiesIntroText { max-width: 690px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.storiesCollection { scroll-margin-top: 24px; }
.storiesGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 66px 46px; }
.storyEntry { min-width: 0; }
.storyEntry:nth-child(even) { position: relative; }
.storyEntry:nth-child(even)::before { position: absolute; top: 0; bottom: 0; left: -23px; width: 1px; background: rgba(125, 73, 137, .10); content: ""; }
.storyLink { display: flex; height: 100%; flex-direction: column; }
.storyImage { width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: #e9e3da; }
.storyImage img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.storyBody { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 30px 8px 0; }
.storyNumber { margin-bottom: 15px; color: var(--purple); font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.storyBody h3 { margin: 0 0 13px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(27px, 3vw, 38px); font-weight: 400; line-height: 1.15; letter-spacing: -.025em; }
.storyCouple { margin: 0 0 5px; color: var(--purple-dark); font-family: Georgia, "Times New Roman", serif; font-size: 20px; line-height: 1.4; }
.storyPlace { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.storyDescription { max-width: 490px; margin: 18px 0 22px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.storyCta { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: auto; color: var(--purple-dark); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.storyCta span { font-size: 18px; font-weight: 400; transition: transform .25s ease; }
.storyLink:hover .storyImage img { transform: scale(1.018); }
.storyLink:hover .storyCta span { transform: translateX(3px); }
.storiesNext { margin-block: clamp(58px, 6vw, 88px); padding-top: clamp(38px, 4vw, 58px); border-top: 1px solid rgba(125, 73, 137, .12); text-align: center; }
.storiesNext .scriptLabel { margin: 0 0 13px; font-size: 22px; }
.storiesNext h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(28px, 3vw, 38px); font-weight: 400; line-height: 1.2; letter-spacing: -.025em; }
.storiesNext > p:not(.scriptLabel) { margin: 18px auto 20px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.storiesTextLink { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; max-width: 100%; padding: 12px 0 8px; border-bottom: 1px solid var(--purple); color: var(--purple-dark); font-size: 10px; font-weight: 700; line-height: 1.6; letter-spacing: .08em; text-transform: uppercase; }
.storiesTextLink:hover, .storiesBackLink:hover { color: var(--purple); }
.storiesPage a:focus-visible { outline: 2px solid var(--purple-dark); outline-offset: 5px; }
@media (max-width: 760px) {
  .storiesContainer { width: calc(100% - 40px); }
  .storiesIntro { padding-top: 22px; padding-bottom: 38px; }
  .storiesBackLink { margin-bottom: 24px; }
  .storiesEyebrow { font-size: 9px; letter-spacing: .12em; }
  .storiesIntro h1 { font-size: clamp(36px, 8vw, 52px); }
  .storiesIntro .scriptLabel { margin-top: 19px; font-size: 22px; }
  .storiesIntroText { font-size: 14px; line-height: 1.8; }
  .storiesGrid { grid-template-columns: 1fr; gap: 42px; }
  .storyEntry:nth-child(even)::before { display: none; }
  .storyBody { padding: 24px 2px 0; }
  .storyNumber { margin-bottom: 12px; }
  .storyBody h3 { font-size: clamp(27px, 6.7vw, 36px); }
  .storyCouple { font-size: 19px; }
  .storyDescription { margin-block: 15px 13px; }
  .storiesNext { margin-block: 48px; padding-top: 34px; }
  .storiesNext .scriptLabel { font-size: 20px; }
  .storiesNext h2 { font-size: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  .storyImage img, .storyCta span { transition: none; }
  .storyLink:hover .storyImage img, .storyLink:hover .storyCta span { transform: none; }
}