/* Scrollen ist die Uhr: Die Bühne steht still, Himmel, Sonne und Ereignis laufen durch 24 Stunden.
   Die Farben kommen aus der Tageszeit, deshalb gibt es bewusst keine Dunkel-Umschaltung. */
@font-face{font-family:"Bodoni Moda";src:url("/fonts/bodoni-moda-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/fonts/instrument-sans.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
:root{
  --papier:#f7f5f2; --tinte:#14161f; --leise:#5a5d69; --linie:#d9d7d2; --nacht:#0f1430; --gold:#e9a23b;
  --himmel:#f8d9c4; --schrift:#14161f; --zart:#14161f44;
  --uhr:"Bodoni Moda","Didot",Georgia,serif;
  --text:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --rand-l:max(20px,env(safe-area-inset-left,0px)); --rand-r:max(20px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);font:400 18px/1.55 var(--text)}
a{color:inherit;text-underline-offset:.16em}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.nur-vorlesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.kopf{position:absolute;inset:0 0 auto;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:calc(18px + env(safe-area-inset-top,0px)) var(--rand-r) 12px var(--rand-l);
  color:var(--schrift);font:700 13px/1 var(--text);letter-spacing:.14em;pointer-events:none;transition:color .25s}
.kopf a{pointer-events:auto;font-weight:500;letter-spacing:0;font-size:15px}
.kopf a.marke{font-weight:700;font-size:13px;letter-spacing:.14em;text-decoration:none}

.tag{height:1100vh;position:relative}
.buehne{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--himmel);color:var(--schrift);
  display:grid;grid-template-rows:minmax(0,1fr) auto;transition:filter .35s;
  padding:calc(72px + env(safe-area-inset-top,0px)) var(--rand-r) 20px var(--rand-l)}
.buehne.hand{filter:saturate(.18) brightness(.96)}
.gestirn{position:absolute;left:0;top:0;width:min(46vw,46vh);aspect-ratio:1;border-radius:50%;background:var(--gold);opacity:.88;will-change:transform}
.feld{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,5vw,72px);align-items:center;max-width:1280px;width:100%;margin-inline:auto;min-height:0}
.uhr{font:500 clamp(84px,19vw,270px)/.92 var(--uhr);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.02em;margin:0}
h1{font:500 clamp(18px,2.1vw,25px)/1.25 var(--text);letter-spacing:0;margin:18px 0 0;max-width:24em;text-wrap:balance}
.ereignis{min-width:0;min-height:15em}
.art{font:600 13px/1 var(--text);letter-spacing:.08em;margin:0 0 14px;display:inline-block;padding:7px 10px;border:1px solid currentColor;border-radius:99px}
.ereignis .titel{font:600 clamp(26px,3.3vw,42px)/1.12 var(--text);letter-spacing:-.02em;margin:0 0 12px;text-wrap:balance}
.ereignis .t{margin:0;max-width:30em;font-size:clamp(17px,1.5vw,19px)}
.wechsel{animation:rein .45s cubic-bezier(.2,.7,.2,1)}
@keyframes rein{from{opacity:.4;transform:translateY(14px)}to{opacity:1;transform:none}}
.leiste{position:relative;max-width:1280px;width:100%;margin-inline:auto;display:grid;gap:10px}
.oben{display:flex;justify-content:space-between;align-items:center;gap:16px}
.schalter{display:flex;gap:6px}
.schalter button{font:500 15px/1 var(--text);color:inherit;background:none;border:1px solid var(--zart);border-radius:99px;padding:11px 15px;cursor:pointer}
.schalter button[aria-pressed="true"]{background:var(--schrift);color:var(--himmel);border-color:var(--schrift)}
.hinweis{font:500 15px/1 var(--text);transition:opacity .3s;display:flex;align-items:center;gap:8px}
.hinweis svg{width:15px;height:15px;animation:wippe 1.6s ease-in-out infinite}
.hinweis.weg{opacity:0}
@keyframes wippe{50%{transform:translateY(4px)}}
.spur{position:relative;height:34px}
.spur i{position:absolute;top:16px;left:0;right:0;height:2px;background:var(--zart)}
.spur button{all:unset;position:absolute;top:0;width:24px;height:34px;margin-left:-12px;cursor:pointer}
.spur button::after{content:"";position:absolute;left:11px;top:11px;width:2px;height:12px;background:var(--schrift);opacity:.5}
.spur button.an::after{opacity:1;height:18px;top:8px}
.spur em{position:absolute;top:10px;left:0;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--schrift);pointer-events:none}

.teil{padding:clamp(72px,11vw,150px) var(--rand-r) clamp(72px,11vw,150px) var(--rand-l)}
.teil.ohne-oben{padding-top:0}
.teil>div{max-width:1120px;margin-inline:auto}
.teil h2{font:500 clamp(36px,6vw,74px)/1.04 var(--uhr);letter-spacing:-.015em;margin:0 0 26px;max-width:15em;text-wrap:balance}
.vor{max-width:36em;font-size:clamp(19px,2vw,23px);line-height:1.4;margin:0}
.vier{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:34px 40px;margin-top:64px}
.vier h3{font:700 19px/1.2 var(--text);margin:0 0 7px}
.vier p{margin:0;color:var(--leise);font-size:17px}
.dunkel{background:var(--nacht);color:#f2efe6}
.ablauf{list-style:none;counter-reset:s;padding:0;margin:56px 0 0;display:grid}
.ablauf li{counter-increment:s;display:grid;grid-template-columns:2.4em minmax(0,1fr);gap:6px 14px;padding:22px 0;border-top:1px solid #f2efe633}
.ablauf li::before{content:counter(s);font:500 30px/1 var(--uhr);color:var(--gold)}
.ablauf h3{font:600 21px/1.2 var(--text);margin:0 0 5px}
.ablauf p{margin:0;opacity:.82;max-width:36em}
.refs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:36px 48px;margin-top:48px}
.refs h3{font:600 14px/1 var(--text);margin:0;padding-bottom:10px;border-bottom:1px solid var(--tinte)}
.refs ul{list-style:none;margin:0;padding:0}
.refs li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid var(--linie)}
.refs small{color:var(--leise);font-size:15px;text-align:right}
.refs a{text-decoration:none;font-weight:600}
.refs a:hover{text-decoration:underline}
.kontakt a.gross{font:500 clamp(30px,6.4vw,76px)/1.1 var(--uhr);text-decoration-thickness:1px;overflow-wrap:anywhere}
.kontakt p{margin:0 0 26px;max-width:32em}
.kontakt p.danach{margin:22px 0 0}
.fuss{padding:26px var(--rand-r) 40px var(--rand-l);border-top:1px solid var(--linie);font-size:14px;color:var(--leise)}
.fuss>div{max-width:1120px;margin-inline:auto;display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between}
.fuss nav{display:flex;gap:18px}

/* Impressum und Datenschutz */
.schlicht .kopf{position:static;color:var(--tinte);max-width:calc(760px + 40px);margin-inline:auto}
.recht{max-width:calc(760px + 40px);margin-inline:auto;padding:40px var(--rand-r) 80px var(--rand-l)}
.recht h1{font:500 clamp(36px,6vw,56px)/1.05 var(--uhr);margin:0 0 30px}
.recht h2{font:700 19px/1.25 var(--text);margin:30px 0 6px}
.recht p{margin:0 0 10px;max-width:38em}

@media (max-width:760px){
  .feld{grid-template-columns:minmax(0,1fr);align-content:center;gap:18px}
  .uhr{font-size:clamp(84px,27vw,150px)}
  .ereignis{min-height:14.5em}
  h1{margin-top:8px}
  .hinweis span{display:none}
}
@media (max-height:600px) and (min-width:761px){.uhr{font-size:clamp(84px,30vh,180px)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.wechsel,.hinweis svg{animation:none}.buehne,.kopf{transition:none}}