/* studio.INTERVAL — Landing-Vorschläge D/E/F */
body.lx{overflow:hidden;height:100svh}
body.lx .hdr{z-index:60}
body.lx .lv-switch,body.lc-body .lv-switch{bottom:calc(var(--bar-h,50px) + 10px)}
body.lx .lay-switch,body.lc-body .lay-switch{bottom:calc(var(--bar-h,50px) + 10px)}
body.lx .ver-switch,body.lc-body .ver-switch{display:none}
.lx-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;padding:14px var(--margin);font-family:var(--mono);font-size:clamp(11px,.72vw,15px);letter-spacing:.04em;background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lx-now{color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lx-now b{color:var(--ink);font-weight:500;font-family:var(--font);font-size:1.15em;letter-spacing:-.01em;margin-right:.6em}
.lx-mid{display:flex;gap:10px;align-items:center;color:var(--grey)}
.lx-mid button{font:inherit;background:none;border:1px solid var(--line);padding:3px 9px;cursor:pointer;color:var(--ink-2)}
.lx-mid button:hover{border-color:var(--ink);color:var(--ink)}
.lx-rubs{display:flex;gap:clamp(12px,1.2vw,22px);justify-content:flex-end;white-space:nowrap}
@media(max-width:1100px){.lx-bar{grid-template-columns:1fr auto}.lx-rubs{display:none}}
@media(max-width:760px){.lx-bar{grid-template-columns:1fr}.lx-rubs{display:none}}

/* ===== D · Takt — one image per interval, hard cut, running clock ===== */
.ld{position:fixed;inset:0;padding-top:calc(var(--hdr-h,90px) + clamp(16px,2vw,50px))!important;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:1fr auto;gap:0 var(--gap);padding:0 var(--margin) calc(var(--bar-h,50px) + 20px)}
.ld-clock{grid-column:1/span 4;align-self:start;font-family:var(--mono);font-size:clamp(40px,7vw,190px);letter-spacing:-.04em;line-height:.9;font-variant-numeric:tabular-nums}
.ld-clock small{display:block;font-size:clamp(11px,.72vw,15px);letter-spacing:.06em;color:var(--grey);margin-top:1.2em;line-height:1.6}
.ld-fr{grid-column:5/span 8;grid-row:1;position:relative;overflow:hidden;min-height:0}
.ld-fr a{position:absolute;inset:0;display:block}
.ld-fr img{width:100%;height:100%;object-fit:contain;object-position:left top;display:block}
.ld-line{grid-column:1/-1;grid-row:2;position:relative;height:1px;background:var(--line);margin-top:clamp(14px,1.4vw,28px)}
.ld-line i{position:absolute;left:0;top:-1px;height:3px;background:var(--ink);width:0}
.ld-ticks{grid-column:1/-1;grid-row:2;display:flex;justify-content:space-between;margin-top:clamp(24px,2vw,40px);font-family:var(--mono);font-size:clamp(10px,.62vw,13px);letter-spacing:.04em;color:var(--grey-2)}
.ld-ticks button{font:inherit;background:none;border:0;padding:0;color:inherit;cursor:pointer}
.ld-ticks button.on{color:var(--accent)}
.ld-ticks button:hover{color:var(--ink)}
@media(max-width:760px){.ld-clock{grid-column:1/-1}.ld-fr{grid-column:1/-1;grid-row:auto;height:50vh}}

/* ===== E · Horizont — horizontal bands + running title line ===== */
.le{position:fixed;inset:0;display:grid;grid-template-rows:1fr auto 1fr auto 1fr;gap:clamp(10px,1vw,22px);padding:calc(var(--hdr-h,90px) + 8px) 0 calc(var(--bar-h,50px) + 8px)}
.le-band{position:relative;overflow:hidden;min-height:0}
.le-track{display:flex;gap:clamp(10px,1vw,22px);height:100%;width:max-content;animation:leL var(--dur,80s) linear infinite;animation-direction:var(--dir,normal)}
.le-band:hover .le-track,.le-type:hover .le-track{animation-play-state:paused}
.le-track a{height:100%;display:block;flex:none}
.le-track img{height:100%;width:auto;display:block;background:#f4f3f0;transition:filter .4s}
.le:hover .le-band a:not(:hover) img{filter:grayscale(1) brightness(1.08)}
.le-type{overflow:hidden;border-block:1px solid var(--ink);padding:clamp(4px,.4vw,10px) 0}
.le-type .le-track{height:auto;align-items:baseline;gap:0}
.le-type a{height:auto;font-size:clamp(28px,4vw,110px);font-weight:500;letter-spacing:-.04em;line-height:1;padding-right:.5em;white-space:nowrap}
.le-type a span{font-family:var(--mono);font-size:.22em;letter-spacing:.04em;color:var(--grey);font-weight:400;vertical-align:.9em;margin-right:.5em}
.le-type a::after{content:"·";color:var(--accent);padding-left:.5em}
.le-type.s a{font-size:clamp(14px,1.3vw,34px);font-family:var(--mono);font-weight:400;letter-spacing:.02em;color:var(--grey)}
.le-type.s a::after{content:"—";color:var(--grey-2)}
body.lx-paused .le-track,body.lx-paused .lf-cell{animation-play-state:paused}
body.lx-paused .le-track{animation-play-state:paused}
@keyframes leL{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== F · Mosaik — the grid rearranges itself cell by cell ===== */
.lf{position:fixed;left:var(--margin);right:var(--margin);top:calc(var(--hdr-h,90px) + 8px);bottom:calc(var(--bar-h,50px) + 8px);display:grid;grid-template-columns:repeat(var(--c,8),minmax(0,1fr));grid-template-rows:repeat(var(--r,4),minmax(0,1fr));gap:1px;background:var(--line)}
.lf-cell{position:relative;background:var(--bg);overflow:hidden}
.lf-cell a{position:absolute;inset:0;display:block}
.lf-cell img{width:100%;height:100%;object-fit:cover;display:block;clip-path:inset(0 0 0 0);transition:clip-path .9s cubic-bezier(.7,0,.2,1)}
.lf-cell.out img{clip-path:inset(0 0 100% 0)}
.lf-cell.in-l img{clip-path:inset(0 100% 0 0)}
.lf-cell .cap{position:absolute;left:8px;bottom:6px;font-family:var(--mono);font-size:clamp(10px,.6vw,13px);letter-spacing:.04em;color:#fff;mix-blend-mode:difference;opacity:0;transition:opacity .25s}
.lf-cell:hover .cap{opacity:1}
.lf-wm{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(10px,1vw,22px)}
.lf-wm h1{margin:0;font-size:clamp(22px,2.4vw,64px);font-weight:500;letter-spacing:-.04em;line-height:.95}
.lf-wm p{margin:0;font-family:var(--mono);font-size:clamp(10px,.65vw,14px);letter-spacing:.04em;color:var(--grey);line-height:1.6}
.lf-t{display:flex;align-items:flex-end;padding:clamp(10px,1vw,22px);font-family:var(--mono);font-size:clamp(10px,.65vw,14px);letter-spacing:.04em;color:var(--grey-2)}

body.lc-body .lc-rubs{white-space:nowrap;gap:clamp(12px,1.2vw,22px);flex-wrap:nowrap}
@media(max-width:1100px){body.lc-body .lc-bar{grid-template-columns:1fr auto}body.lc-body .lc-rubs{display:none}}