
/* 2.4.0 Final UX consistency layer */
:root{
  --ux-radius-sm:12px;--ux-radius-md:18px;--ux-radius-lg:26px;
  --ux-space-1:8px;--ux-space-2:14px;--ux-space-3:20px;--ux-space-4:30px;--ux-space-5:46px;
  --ux-focus:0 0 0 3px color-mix(in srgb,var(--brand-secondary) 28%,transparent);
}
html{scroll-padding-top:96px}
body{overflow-x:hidden}
.wrap{width:min(var(--content-width),calc(100% - 40px))}
.section{padding-block:clamp(58px,7vw,96px)}
.page-hero{padding-top:clamp(118px,14vw,176px);padding-bottom:clamp(48px,7vw,82px)}
.page-hero h1,.section-title h2{letter-spacing:-.035em;text-wrap:balance}
.page-hero p,.section-title p{max-width:760px;line-height:1.7}
.cta,button,input,select,textarea{font:inherit}
.cta,.site-header nav a,.site-search-trigger,.menu{touch-action:manipulation}
.cta{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
a,button,input,select,textarea{outline:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{box-shadow:var(--ux-focus);outline:2px solid transparent}
.site-header{backdrop-filter:saturate(150%) blur(24px);-webkit-backdrop-filter:saturate(150%) blur(24px)}
.site-header .header-inner{min-height:72px}
.site-header nav a{position:relative}
.site-header nav a.active::after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:2px;border-radius:2px;background:var(--brand-primary)}
.shows-hub-card,.resident-card,.history-track,.contact-about-form-card,.help-card{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
@media(hover:hover){
  .shows-hub-card:hover,.resident-card:hover,.help-card:hover{transform:translateY(-3px)}
}
.shows-hub-grid,.resident-grid-modern{gap:clamp(16px,2vw,26px)}
.shows-hub-card,.resident-card{overflow:hidden}
.resident-card-copy,.shows-hub-copy{padding:clamp(16px,2.2vw,24px)}
.history-track{min-height:78px}
.history-track-line{align-items:center}
.history-cover img,.resident-image img,.shows-hub-art img{display:block;width:100%;height:100%;object-fit:cover}
.contact-form input,.contact-form textarea,.contact-form select{min-height:48px;border-radius:12px}
.contact-form textarea{min-height:150px}
.help-center-shell,.help-article-shell{scroll-margin-top:100px}
.help-card a,.help-sidebar a,.help-article a{position:relative;z-index:1}
@media(max-width:900px){
  .wrap{width:min(var(--content-width),calc(100% - 28px))}
  .page-hero{padding-top:110px}
}
@media(max-width:680px){
  .wrap{width:calc(100% - 24px)}
  .section{padding-block:54px}
  .page-hero{padding-top:98px;padding-bottom:42px}
  .page-hero h1{font-size:clamp(2rem,10vw,3.1rem)}
  .site-header .header-inner{min-height:64px}
  .site-header nav{max-height:calc(100svh - 76px);overflow:auto}
  .cta{width:100%}
  .hero-actions,.about-hero-actions,.shows-hub-actions{display:grid!important;grid-template-columns:1fr!important}
  .history-tabs-shell{position:sticky;top:64px;z-index:8}
  .history-track{grid-template-columns:52px 1fr!important;gap:12px!important}
  .history-cover{width:52px!important;height:52px!important}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}


/* 2.8.8 – ruhigere Content-Überschriften */
:root{
  --content-h1-size:clamp(2.15rem,4.8vw,4.35rem);
  --content-h2-size:clamp(1.55rem,3vw,2.55rem);
  --content-h3-size:clamp(1rem,1.7vw,1.28rem);
}

/* Die Startseiten-Markenbotschaft bleibt bewusst groß; normale Contentseiten werden ruhiger. */
body:not([data-page="home"]) .page-hero{
  min-height:0;
  padding-top:clamp(92px,10vw,132px);
  padding-bottom:clamp(34px,5vw,58px);
}
body:not([data-page="home"]) .page-hero h1{
  max-width:980px;
  margin:.22em 0 .18em;
  font-size:var(--content-h1-size);
  line-height:.98;
  letter-spacing:-.045em;
  text-wrap:balance;
}
body:not([data-page="home"]) .page-hero p{
  max-width:720px;
  margin-top:8px;
  font-size:clamp(.88rem,1.25vw,1.04rem);
  line-height:1.62;
}

/* Inhaltssektionen */
main .section-title{
  align-items:end;
  gap:18px;
  margin-bottom:clamp(18px,2.8vw,30px);
}
main .section-title h2{
  max-width:880px;
  margin:.15em 0 0;
  font-size:var(--content-h2-size);
  line-height:1.03;
  letter-spacing:-.035em;
  text-wrap:balance;
}
main .section-title p{
  max-width:680px;
  margin-top:7px;
  font-size:.88rem;
  line-height:1.58;
}
main .section-title .eyebrow,
main .page-hero .eyebrow{
  font-size:.62rem;
  letter-spacing:.11em;
}

main article h2,
main .content-card h2,
main .show-about h2,
main .show-section h2,
main .privacy-card h2,
main .contact-section h2{
  font-size:var(--content-h2-size);
  line-height:1.07;
  letter-spacing:-.03em;
}
main article h3,
main .content-card h3,
main .show-section h3{
  font-size:var(--content-h3-size);
  line-height:1.18;
  letter-spacing:-.018em;
}

/* Seiten mit bisher besonders dominanten Überschriften */
.show-hub-intro h1{
  font-size:clamp(2.6rem,5.8vw,5.7rem)!important;
  line-height:.92!important;
}
.show-about h2{
  font-size:clamp(1.7rem,3vw,2.7rem)!important;
}
.help-hero-compact h1,
.help-article-hero-compact h1{
  font-size:clamp(2.05rem,4.4vw,4rem)!important;
  line-height:.98!important;
}
body[data-page="schedule"] .schedule-hero h1,
body[data-page="my320"] .my320-hero h1{
  font-size:clamp(2.35rem,5vw,4.8rem)!important;
  line-height:.96!important;
}
body[data-page="schedule"] .schedule-hero,
body[data-page="my320"] .my320-hero{
  min-height:0!important;
}

/* Fließtext-Überschriften im Help Center */
.help-article-body h2{
  font-size:clamp(1.3rem,2.4vw,1.8rem)!important;
  line-height:1.15!important;
  margin-top:1.45em!important;
}
.help-article-body h3{
  font-size:clamp(1.05rem,1.8vw,1.28rem)!important;
  line-height:1.2!important;
}

@media(max-width:680px){
  :root{
    --content-h1-size:clamp(1.9rem,9vw,2.8rem);
    --content-h2-size:clamp(1.4rem,7vw,2rem);
  }
  body:not([data-page="home"]) .page-hero{
    padding-top:76px;
    padding-bottom:32px;
  }
  main .section-title{
    align-items:flex-start;
    margin-bottom:20px;
  }
  .show-hub-intro h1{
    font-size:clamp(2.2rem,11vw,3.6rem)!important;
  }
}
