:root {
  --background: #f8f2eb; --background-alt: #eee8f3; --surface: rgba(255,253,249,.9);
  --text: #202441; --muted: #606171; --purple: #735f94; --coral: #d97a66;
  --peach: #efad80; --line: rgba(65,56,91,.16); --shadow: 0 18px 50px rgba(48,39,70,.1);
  --sans: "DM Sans",ui-sans-serif,system-ui,sans-serif; --serif: "Newsreader",Georgia,serif; --display: "IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
}
* { box-sizing:border-box }
html { scroll-behavior:smooth }
body { margin:0; overflow-x:hidden; color:var(--text); background:radial-gradient(circle at 8% 18%,rgba(239,173,128,.22),transparent 26rem),radial-gradient(circle at 94% 17%,rgba(115,95,148,.16),transparent 28rem),linear-gradient(145deg,var(--background),var(--background-alt)); font-family:var(--sans); line-height:1.7; text-rendering:optimizeLegibility }
.background-shape { position:fixed; z-index:-1; border-radius:48% 52% 65% 35%; filter:blur(8px); opacity:.24; animation:drift 18s ease-in-out infinite alternate }
.shape-one { top:-8rem; right:-10rem; width:30rem; height:30rem; background:rgba(115,95,148,.3) }
.shape-two { bottom:-14rem; left:-11rem; width:34rem; height:34rem; background:rgba(217,122,102,.25); animation-delay:-5s }
main { width:min(100% - 2.5rem,960px); margin:0 auto; padding:6rem 0 7rem }
.hero { position:relative; isolation:isolate; min-height:54vh; display:grid; place-content:center; padding:4.5rem 0 5.25rem; text-align:center }
.hero::before { content:""; position:absolute; z-index:-1; top:50%; left:50%; width:min(92%,48rem); height:clamp(11rem,26vw,15rem); border-top:1px solid rgba(115,95,148,.12); border-bottom:1px solid rgba(217,122,102,.12); background:radial-gradient(ellipse at center,rgba(255,253,249,.72) 0%,rgba(255,253,249,.42) 52%,rgba(255,253,249,0) 76%); transform:translate(-50%,-48%); pointer-events:none }
.hero::after { content:""; position:absolute; bottom:clamp(2.5rem,6vh,4.25rem); left:50%; width:clamp(2.75rem,7vw,4.25rem); height:1px; background:linear-gradient(90deg,transparent,var(--coral),transparent); transform:translateX(-50%); opacity:.75 }
.hero .kicker { position:relative; margin-bottom:1rem }
.kicker,.section-label { margin:0 0 .75rem; color:var(--purple); font-size:.75rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase }
h1,h2,h3 { font-family:var(--serif); font-weight:600 }
h1 { position:relative; z-index:0; margin:0; padding:.05em .22em .12em; font-family:var(--display); font-size:clamp(3.75rem,9vw,6.75rem); font-weight:600; line-height:.98; letter-spacing:-.045em; color:var(--text); text-shadow:0 3px 18px rgba(48,39,70,.08) }
.event-card { padding:clamp(2.2rem,6vw,4.25rem); text-align:center; border:1px solid var(--line); border-radius:1.25rem; background:var(--surface); box-shadow:var(--shadow); backdrop-filter:blur(16px) }
.event-card h2 { margin:.15rem 0 1.75rem; font-family:var(--display); font-size:clamp(2.35rem,5vw,3.75rem); font-weight:600; line-height:1.08; letter-spacing:-.035em; color:var(--text); white-space:nowrap }
.event-facts { display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem; margin-bottom:.25rem }
.event-facts span { padding:.6rem .9rem; border:1px solid var(--line); border-radius:.45rem; background:rgba(255,255,255,.5); font-size:.91rem; font-weight:500 }
.event-description:empty { display:none }
.event-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; margin-top:1.85rem }
.button { display:inline-flex; min-height:3rem; align-items:center; justify-content:center; gap:.8rem; padding:.72rem 1.25rem; border:1px solid transparent; border-radius:.45rem; color:white; background:var(--purple); text-decoration:none; font:700 .92rem var(--sans); box-shadow:0 8px 22px rgba(115,95,148,.18); transition:transform 180ms ease,background-color 180ms ease,border-color 180ms ease,box-shadow 180ms ease }
.button:hover { transform:translateY(-2px); background:#655180; box-shadow:0 12px 26px rgba(115,95,148,.23) }
.button:focus-visible,.email-link:focus-visible { outline:3px solid rgba(217,122,102,.42); outline-offset:3px }
.button-secondary { border-color:rgba(115,95,148,.35); color:var(--purple); background:transparent; box-shadow:none }
.button-secondary:hover { color:white; border-color:var(--purple); background:var(--purple); box-shadow:0 10px 24px rgba(115,95,148,.16) }
.festival-details { max-width:820px; margin:7.5rem auto 0 }
.festival-story { text-align:center }
.festival-story h2 { max-width:680px; margin:.15rem auto 2.2rem; font-family:var(--display); font-size:clamp(2.25rem,4.8vw,3.45rem); font-weight:600; line-height:1.12; letter-spacing:-.032em; text-wrap:balance }
.festival-copy { max-width:700px; margin:0 auto; color:var(--muted); font-size:1.01rem; text-align:left }
.festival-copy p { margin:0 0 1.2rem }
.festival-accordions { display:grid; gap:.75rem; margin-top:3.5rem }
.festival-accordions details { overflow:hidden; border:1px solid var(--line); border-radius:.75rem; background:var(--surface); box-shadow:0 8px 28px rgba(48,39,70,.06); backdrop-filter:blur(16px) }
.festival-accordions summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.15rem 1.35rem; cursor:pointer; list-style:none; font:600 clamp(1.4rem,3vw,1.75rem) var(--serif); transition:color 180ms ease,background-color 180ms ease }
.festival-accordions summary::-webkit-details-marker { display:none }
.festival-accordions summary::after { content:""; flex:0 0 .6rem; width:.6rem; height:.6rem; margin-right:.35rem; border-right:1.5px solid var(--purple); border-bottom:1.5px solid var(--purple); transform:rotate(45deg) translateY(-2px); transition:transform 220ms ease }
.festival-accordions details[open] summary::after { transform:rotate(225deg) translate(-2px,-2px) }
.festival-accordions summary:hover { color:var(--purple); background:rgba(255,255,255,.35) }
.festival-accordions summary:focus-visible { outline:3px solid rgba(217,122,102,.42); outline-offset:-3px }
.accordion-content { padding:0 1.35rem 1.5rem; color:var(--muted); border-top:1px solid var(--line) }
.accordion-content>p { margin:1.25rem 0 0 }
.program-block { padding:1.25rem 0 }
.program-block+.program-block { border-top:1px solid var(--line) }
.program-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.5rem; align-items:start; padding:.72rem .85rem; border-radius:.4rem }
.program-item:nth-child(even) { background:rgba(115,95,148,.045) }
.program-item time,.journey-times time { color:var(--text); font-size:.91rem; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap }
.program-name { display:block; color:var(--text); font-weight:650; line-height:1.45 }
.program-place { display:block; margin-top:.08rem; color:var(--muted); font-size:.86rem }
.program-place::before { content:"Ort: " }
.program-times { display:grid; justify-items:end; gap:.1rem }
.program-opening { margin-bottom:.4rem; border-left:3px solid var(--coral); background:rgba(217,122,102,.09) }
.program-opening .program-name,.program-opening time { font-size:1.03rem; color:var(--text) }
.program-heading { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.8rem }
.program-block h3 { margin:0; color:var(--text); font-size:1.3rem; line-height:1.3 }
.program-heading p { margin:0; font-size:.86rem }
.journey-times { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem }
.journey-times time { padding:.55rem .75rem; border:1px solid var(--line); border-radius:.35rem; background:rgba(255,255,255,.42); text-align:center }
.program-support ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem 1.25rem; margin:.8rem 0 0; padding:0; list-style:none }
.program-support li { position:relative; padding-left:1rem; font-size:.93rem }
.program-support li::before { content:""; position:absolute; top:.72em; left:0; width:.3rem; height:.3rem; border-radius:50%; background:var(--coral) }
.map-button { margin-top:1.25rem }
.contact { max-width:700px; margin:7.5rem auto 1.5rem; text-align:center }
.contact h2 { margin:0; font-size:clamp(2.3rem,6vw,3.7rem); line-height:1.1 }
.contact>p:not(.section-label) { color:var(--muted) }
.email-link { display:inline-block; margin-top:.7rem; color:var(--text); text-decoration-color:var(--coral); text-underline-offset:.35rem; font-weight:700 }
.footer { position:relative; overflow:hidden; padding:6rem 1.25rem 2.5rem; background:radial-gradient(circle at 85% 100%,rgba(239,173,128,.5),transparent 35rem),radial-gradient(circle at 8% 100%,rgba(115,95,148,.36),transparent 38rem),rgba(237,230,241,.72); border-top:1px solid rgba(115,95,148,.12) }
.footer-inner { width:min(100%,760px); margin:0 auto; text-align:center }
#imprint { color:var(--muted); font-size:.9rem }
#imprint p { margin:.12rem 0 }
#imprint a { color:inherit; text-underline-offset:.2rem }
.copyright { margin:1.75rem 0 0; padding-top:1.25rem; border-top:1px solid rgba(65,56,91,.12); color:var(--muted); font-size:.78rem }
.reveal { opacity:0; transform:translateY(18px); transition:opacity 650ms ease,transform 650ms ease }
.reveal.visible { opacity:1; transform:translateY(0) }
@keyframes drift { to { transform:translate3d(2rem,1.5rem,0) rotate(7deg) } }
@media (max-width:620px) {
  main { width:min(100% - 1.5rem,960px); padding:3.5rem 0 5.5rem }
  .hero { min-height:45vh; padding:3rem 0 4rem }
  .hero::before { width:calc(100% + .5rem); height:10.5rem }
  .hero::after { bottom:2.25rem }
  h1 { font-size:clamp(3.35rem,16vw,4.8rem) }
  .event-card h2 { font-size:clamp(2rem,10.5vw,2.75rem); white-space:normal; text-wrap:balance }
  .festival-story h2 { font-size:clamp(2rem,9.5vw,2.65rem) }
  .event-card { padding:2.1rem 1.1rem; border-radius:.85rem }
  .event-facts,.event-actions { display:grid }
  .event-facts span { padding:.5rem .65rem }
  .button { width:100% }
  .festival-details,.contact { margin-top:5.5rem }
  .festival-story h2 { margin-bottom:1.6rem }
  .festival-copy { font-size:.97rem }
  .festival-accordions { margin-top:2.5rem }
  .festival-accordions summary { padding:1rem 1.05rem }
  .accordion-content { padding:0 1.05rem 1.2rem }
  .program-item { grid-template-columns:1fr; gap:.25rem; padding:.7rem .65rem }
  .program-times { justify-items:start }
  .program-heading { display:block }
  .program-heading p { margin-top:.25rem }
  .journey-times,.program-support ul { grid-template-columns:1fr }
  .journey-times time { text-align:left }
  .footer { padding-top:4.5rem }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important } .reveal { opacity:1; transform:none } }