/* Harrys Geschichte: gleiche Farben, Schriften und Bedienelemente wie der Onepager. */
.story-page .section{padding-block:80px}
.story-page .story-intro{padding-top:175px;padding-bottom:90px}
.story-back{display:inline-flex;align-items:center;gap:12px;margin-bottom:48px;color:var(--muted);font-size:10px;letter-spacing:1.8px}
.story-back:hover{color:var(--gold)}
.story-back .ui-icon{width:17px;height:17px}
.story-hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:8%}
.story-heading{container-type:inline-size;min-width:0}
.story-heading h1{font-size:clamp(38px,10.7cqi,79px);line-height:1.13;letter-spacing:-.035em;margin:21px 0 32px}
.story-heading>p:not(.eyebrow){font-size:15px;line-height:1.95;color:#c0bbb3;max-width:520px}
.story-heading>p+p:not(.eyebrow){margin-top:18px}
.story-heading .atelier-note{margin-top:30px}
.story-portrait{position:relative;margin:0}
.story-portrait>img{aspect-ratio:1;object-fit:cover;filter:saturate(.75) brightness(.9)}
.story-portrait .portrait-signature{bottom:33px}
.story-portrait figcaption{font-size:9px;letter-spacing:2px;color:var(--muted);margin-top:18px;line-height:1.7}
.story-chapter{border-top:1px solid var(--border);display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:start}
.story-chapter h2{font-size:clamp(34px,3.6vw,57px);line-height:1.18;margin:18px 0 34px;letter-spacing:-.025em}
.story-atelier{margin:0}
.story-atelier img{aspect-ratio:3/2;height:auto;filter:brightness(.75) saturate(.65)}
.story-prose{padding-top:38px}
.story-prose p{font-size:15px;line-height:2;color:#c0bbb3}
.story-prose p+p{margin-top:26px}
.story-prose .ghost{margin-top:36px}
.story-page .story-quote{padding-top:60px;padding-bottom:105px;text-align:center}
.story-quote figure{max-width:1000px;margin:0 auto;border-block:1px solid var(--border);padding:55px 4%}
.story-quote blockquote{margin:0}
.story-quote blockquote p:first-child{font:400 clamp(30px,3.7vw,54px)/1.25 'Bodoni Moda',Georgia,serif;color:var(--gold);text-wrap:balance;letter-spacing:-.02em}
.story-quote blockquote p+p{max-width:640px;font-size:15px;line-height:1.9;color:#c0bbb3;margin:25px auto 0}
.story-quote figcaption{margin-top:25px;font-size:10px;letter-spacing:2.5px;color:var(--muted)}
nav a[aria-current=page]{color:var(--gold)}
.footer-logo{max-width:100%}
.footer-logo img{max-width:100%}
@media(max-width:1050px) and (min-width:701px){
  .story-hero,.story-chapter{gap:5%}
  .story-heading>p:not(.eyebrow),.story-prose p{font-size:14px}
  .story-heading .eyebrow{font-size:10px;letter-spacing:2px}
}
@media(max-width:700px){
  .story-page .section{padding-block:48px}
  .story-page .story-intro{padding-top:115px;padding-bottom:48px}
  .story-back{margin-bottom:32px;font-size:9px;letter-spacing:1.3px}
  .story-hero,.story-chapter{grid-template-columns:1fr;gap:32px}
  .story-heading .eyebrow{font-size:9px;letter-spacing:2px}
  .story-heading h1{font-size:clamp(30px,10.8cqi,58px);margin:16px 0 24px}
  .story-heading>p:not(.eyebrow),.story-prose p{font-size:14px;line-height:1.9}
  .story-heading>p+p:not(.eyebrow){margin-top:16px}
  .story-heading .atelier-note{margin-top:23px;line-height:1.7}
  .story-portrait{max-width:440px;width:100%;margin:auto}
  .story-portrait .portrait-signature{bottom:25px}
  .story-portrait figcaption{font-size:8px;letter-spacing:1.5px;margin-top:13px}
  .story-chapter .eyebrow{font-size:9px;letter-spacing:2px}
  .story-chapter h2{font-size:clamp(30px,8vw,43px);margin:15px 0 26px}
  .story-prose{padding-top:0}
  .story-prose p+p{margin-top:22px}
  .story-prose .ghost{margin-top:28px;font-size:9px;gap:30px;max-width:100%}
  .story-page .story-quote{padding-top:15px;padding-bottom:60px}
  .story-quote figure{padding:35px 0}
  .story-quote blockquote p:first-child{font-size:clamp(28px,8vw,40px)}
  .story-quote blockquote p+p{font-size:14px;line-height:1.9;margin-top:20px}
  .story-quote figcaption{font-size:9px;margin-top:22px}
}