/* Design 3: Tagesuhr statt Sonne. Der Marker wandert beim Scrollen durch vier Tagesabschnitte. */
.clockday{margin-top:clamp(56px,8vw,110px);background:#fff;border-block:1px solid var(--line)}
.clock-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px)}
.clock-chapters{padding-block:clamp(64px,9vw,120px) clamp(48px,6vw,80px)}
.clock-chapters>h2{max-width:11ch;margin-bottom:clamp(24px,5vw,60px)}
.clock-chapters .chapter{min-height:62vh;display:flex;flex-direction:column;justify-content:center;gap:12px;transition:opacity .5s}
.js .clock-chapters .chapter{opacity:.25}.js .clock-chapters .chapter.is-active{opacity:1}
.chapter-time{display:flex;align-items:center;gap:10px}.chip-dot{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--c)}
.clock-chapters .chapter h3{font-size:clamp(2rem,4.2vw,3.6rem);line-height:1;letter-spacing:-.035em}
.clock-stage{position:sticky;top:var(--header);height:calc(100vh - var(--header));display:grid;place-items:center}
.clock{position:relative;width:min(520px,100%);aspect-ratio:1}
.clock svg{width:100%;height:100%;display:block;overflow:visible}
.clock .seg{transition:stroke-width .5s cubic-bezier(.3,1.4,.4,1),opacity .4s;opacity:.55}
.clock .seg.is-on{stroke-width:54;opacity:1}
.clock .tick{font:800 17px Manrope,Arial,sans-serif;fill:var(--muted)}
.clock .marker{transform:rotate(var(--a,0deg));transition:transform .15s linear}
.clock .marker circle:first-child{fill:#fff;stroke:var(--ink);stroke-width:6}.clock .marker circle:last-child{fill:var(--ink)}
.clock-read{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:4px;pointer-events:none}
.clock-time{font-size:clamp(2.6rem,6vw,4.6rem);font-weight:800;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}.clock-time small{font-size:.35em;letter-spacing:0;font-weight:700;color:var(--muted)}
.clock-name{font-weight:700;color:var(--muted)}
@media(max-width:800px){.clock-grid{grid-template-columns:1fr}.clock-stage{order:-1;height:36vh;background:#fff;z-index:2;margin-inline:calc(50% - 50vw);width:100vw}.clock{width:min(240px,60vw)}.clock-chapters .chapter{min-height:44vh}.clock-chapters>h2{margin-top:-4vh}}
@media(prefers-reduced-motion:reduce){.clock .marker{transition:none}}