/* assets/css/claustrophobia.css – Produktseite CLAUSTROPHOBIA (plugins_claustrophobia.php), Film-Horror-Look nur hier.
   Kapitelfarben kommen aus dem Plugin und wechseln über body[data-room]. Header, Menüs, Footer und Scroll-Leiste sind hier mit angepasst. */
@font-face { font-family: 'Anton'; src: url('/fonts/anton-latin-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/fonts/instrument-serif-latin-400-normal.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }

.is-claus {
    --bg: #050203; --acc: #ff4a36; --bone: #f1e4dc; --dim: #bfa09a;
    --anton: 'Anton', Impact, 'Arial Narrow', sans-serif; --serif: 'Instrument Serif', 'Times New Roman', serif; --jb: 'JetBrains Mono', ui-monospace, monospace;
    background: var(--bg); color: var(--bone); transition: background-color .9s ease;
}
.is-claus[data-room="coffin"] { --bg: #070403; --acc: #e3a060; --bone: #f1e4d0; --dim: #bba48c; }
.is-claus[data-room="well"] { --bg: #02060a; --acc: #78c8ff; --bone: #e4f1f7; --dim: #9fb5c0; }
.is-claus ::selection { background: var(--acc); color: #000; }
.cl { overflow-x: clip; }
.cl h1, .cl h2, .cl h3 { color: var(--bone); }

/* Filmkorn, Vignette und Projektor-Flackern über der ganzen Seite */
.cl-film { position: fixed; inset: 0; z-index: 1200; pointer-events: none;
    background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%); }
.cl-film::before { content: ''; position: absolute; inset: -60px; opacity: .09; mix-blend-mode: screen;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: cl-grain .9s steps(16) infinite; }
.cl-film::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0; animation: cl-flicker 7s steps(1) infinite; }
@keyframes cl-grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-30px, 20px); } 50% { transform: translate(24px, -36px); } 75% { transform: translate(-16px, -12px); } 100% { transform: translate(0, 0); } }
@keyframes cl-flicker { 0%, 100% { opacity: 0; } 41% { opacity: .025; } 42% { opacity: 0; } 43% { opacity: .018; } 44% { opacity: 0; } 88% { opacity: .02; } 89% { opacity: 0; } }
/* Schnitt beim Kapitelwechsel: kurzes helles Flackern */
.cl-cut .cl-film::after { animation: cl-cut .5s steps(1) 1; }
@keyframes cl-cut { 0% { opacity: .22; } 12% { opacity: 0; } 24% { opacity: .12; } 36% { opacity: 0; } 55% { opacity: .05; } 70%, 100% { opacity: 0; } }

/* Sucher-Ecken + Untertitel */
.cl-frame { position: relative; margin: 0; }
.cl-c { position: absolute; z-index: 3; width: 22px; height: 22px; border: 0 solid var(--acc); pointer-events: none; transition: border-color .9s, left .2s linear, right .2s linear; }
.cl-c.tl { top: 10px; left: 10px; border-top-width: 2px; border-left-width: 2px; }
.cl-c.tr { top: 10px; right: 10px; border-top-width: 2px; border-right-width: 2px; }
.cl-c.bl { bottom: 10px; left: 10px; border-bottom-width: 2px; border-left-width: 2px; }
.cl-c.br { bottom: 10px; right: 10px; border-bottom-width: 2px; border-right-width: 2px; }
.cl-sub { position: absolute; left: 0; right: 0; bottom: 7%; z-index: 3; margin: 0; padding: 0 28px; text-align: center; font: italic 400 clamp(1rem, 1.7vw, 1.35rem)/1.3 var(--serif); color: #f4f1e6; text-shadow: 0 2px 3px #000, 0 0 12px #000; }
.cl-sub.is-static { position: static; padding: 0; margin-top: 22px; }

/* Buttons, Tags */
.cl-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cl-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; font: 500 .74rem/1 var(--jb); letter-spacing: .2em; text-transform: uppercase; color: var(--bone); text-decoration: none; border: 1px solid color-mix(in srgb, var(--bone) 55%, transparent); background: transparent; cursor: pointer; transition: border-color .3s, box-shadow .3s, color .3s, background-color .3s; }
.cl-btn:hover { border-color: var(--acc); color: var(--acc); box-shadow: 0 0 22px -6px var(--acc), inset 0 0 14px -8px var(--acc); }
.cl-btn.is-solid { background: var(--bone); color: #000; border-color: var(--bone); }
.cl-btn.is-solid:hover { background: var(--acc); border-color: var(--acc); color: #000; }
.cl-btn:focus-visible, .cl-rooms button:focus-visible, .cl-mats button:focus-visible, .cl-play:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.cl-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0; margin: 0 0 30px; font: 500 .7rem/1 var(--jb); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.cl-tags li::before { content: '· '; color: var(--acc); }
.cl-tags li:first-child::before { content: ''; }

/* Hero: Name senkrecht links wie im Plugin */
.cl-hero { padding: calc(var(--header-h) + clamp(32px, 5vw, 70px)) 0 clamp(60px, 8vw, 110px); }
.cl-hero-grid { display: grid; grid-template-columns: auto minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 60px); align-items: center; }
.cl-name { margin: 0; writing-mode: vertical-rl; transform: rotate(180deg); font: 400 clamp(4rem, 8.4vw, 7.6rem)/.86 var(--anton); letter-spacing: .01em; color: var(--bone);
    text-shadow: 0 0 18px color-mix(in srgb, var(--acc) 55%, transparent), 0 0 60px color-mix(in srgb, var(--acc) 25%, transparent); transition: text-shadow .9s; }
.cl-crumb { font: .72rem/1 var(--jb); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 0 0 20px; }
.cl-crumb a { color: var(--bone); text-decoration: underline; text-decoration-color: var(--acc); text-underline-offset: 4px; }
.cl-claim { font: 400 clamp(2.4rem, 4.4vw, 3.9rem)/1 var(--serif); letter-spacing: -.01em; margin: 0 0 20px; text-wrap: balance; }
.cl-claim em { color: var(--acc); text-shadow: 0 0 24px color-mix(in srgb, var(--acc) 45%, transparent); }
.cl-lead { color: var(--dim); font-size: 1.05rem; line-height: 1.65; max-width: 34em; margin: 0 0 24px; }
.cl-hero-shot { background: #000; box-shadow: 0 40px 90px -30px #000, 0 0 80px -40px var(--acc); }
.cl-hero-shot video { display: block; width: 100%; height: auto; filter: contrast(1.05) saturate(1.05); }
.cl-hero-shot .cl-sub { bottom: auto; top: calc(100% + 14px); font-size: 1rem; color: var(--dim); text-shadow: none; }

/* Abschnitte */
.cl-sec { padding: clamp(70px, 10vw, 140px) 0; }
.cl-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.cl-kicker { font: 500 .72rem/1 var(--jb); letter-spacing: .28em; text-transform: uppercase; color: var(--acc); margin: 0 0 14px; }
.cl-head h2 { margin: 0 0 16px; font: 400 clamp(2.4rem, 5.6vw, 4.6rem)/.95 var(--anton); text-transform: uppercase; letter-spacing: .005em; }
.cl-head p:last-child { color: var(--dim); margin: 0; font-size: 1.02rem; line-height: 1.65; }

/* Filmbilder mit Wänden, die sich zuschieben (--sq 0…1) */
.cl-screen { aspect-ratio: 16 / 10; overflow: hidden; background: #000; }
.cl-plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; }
.cl-wall { position: absolute; top: 0; bottom: 0; z-index: 2; width: calc(var(--sq, 0) * 30%); background: #000; box-shadow: 0 0 30px 10px #000; transition: width .25s cubic-bezier(.2, .7, .2, 1); }
.cl-wall.l { left: 0; } .cl-wall.r { right: 0; }
.cl-frame .cl-c.tl, .cl-frame .cl-c.bl { left: calc(10px + var(--sq, 0) * 30%); }
.cl-frame .cl-c.tr, .cl-frame .cl-c.br { right: calc(10px + var(--sq, 0) * 30%); }

/* Player */
.cl-player { --lvl: 0; display: grid; gap: 22px; }
.cl-player .cl-screen { box-shadow: 0 0 calc(40px + var(--lvl) * 90px) calc(-30px + var(--lvl) * 12px) var(--acc); }
.cl-player[data-pick="coffin"] [data-plate="coffin"], .cl-player[data-pick="red"] [data-plate="red"], .cl-player[data-pick="well"] [data-plate="well"] { opacity: calc(.8 + var(--lvl) * .2); }
.cl-player[data-pick="dry"] [data-plate="dry"] { opacity: .35; filter: grayscale(1); }
.cl-player[data-pick="dry"] .cl-wall { width: 0; }
.cl-player .cl-screen { --sq: .08; }
.cl-desk { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(18px, 3vw, 34px); align-items: center; }
.cl-play { position: relative; width: 108px; height: 108px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--bone); cursor: pointer; display: grid; place-items: center; }
.cl-play svg { position: relative; z-index: 1; filter: drop-shadow(0 1px 3px #000); }
.cl-play .i-pause, .cl-play[aria-pressed="true"] .i-play { display: none; }
.cl-play[aria-pressed="true"] .i-pause { display: block; }
.cl-play .cl-knob { position: absolute; inset: 0; }
/* Bakelit-Knopf aus dem Filmstrip (81 Bilder): --f = 0…80 */
.cl-knob { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; background: url('/assets/plugins/claustrophobia/knob-red.webp') 0 calc(var(--f, 20) / 80 * 100%) / 100% auto no-repeat; }
.is-claus[data-room="coffin"] .cl-knob { background-image: url('/assets/plugins/claustrophobia/knob-coffin.webp'); }
.is-claus[data-room="well"] .cl-knob { background-image: url('/assets/plugins/claustrophobia/knob-well.webp'); }
.cl-pick { display: grid; gap: 12px; }
.cl-rooms, .cl-mats { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.cl-rooms button, .cl-mats button { position: relative; padding: 8px 0; background: none; border: 0; color: var(--dim); cursor: pointer; font: 400 clamp(1.25rem, 2vw, 1.6rem)/1 var(--serif); transition: color .3s; }
.cl-rooms button b { font: 500 .66rem/1 var(--jb); letter-spacing: .12em; margin-right: 8px; color: color-mix(in srgb, var(--dim) 70%, transparent); vertical-align: 3px; }
.cl-rooms button::after, .cl-mats button::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--acc); box-shadow: 0 0 10px var(--acc); transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.cl-rooms button[aria-pressed="true"], .cl-mats button[aria-pressed="true"], .cl-rooms button:hover, .cl-mats button:hover { color: var(--bone); }
.cl-rooms button[aria-pressed="true"]::after, .cl-mats button[aria-pressed="true"]::after { transform: none; }
.cl-mats button { font: 500 .72rem/1 var(--jb); letter-spacing: .22em; text-transform: uppercase; }

/* Kapitel */
.cl-ch { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 64px); align-items: center; padding: clamp(28px, 4vw, 48px) 0; }
.cl-ch:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.cl-ch:nth-of-type(even) .cl-ch-img { order: 2; }
.cl-ch-img { aspect-ratio: 16 / 10; overflow: hidden; background: #000; }
.cl-ch-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cl-ch-no { font: 500 .72rem/1 var(--jb); letter-spacing: .28em; text-transform: uppercase; color: var(--acc); margin: 0 0 10px; }
.cl-ch h3 { margin: 0 0 16px; font: 400 clamp(2.6rem, 5vw, 4.2rem)/.95 var(--serif); letter-spacing: -.01em; }
.cl-ch-copy > p { color: var(--dim); line-height: 1.7; margin: 0 0 18px; }
.cl-ctl { display: grid; gap: 6px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); }
.cl-ctl b { font: 500 .74rem/1 var(--jb); letter-spacing: .26em; color: var(--acc); }
.cl-ctl span { color: var(--dim); font-size: .95rem; }
/* jedes Kapitel in seiner eigenen Farbe, unabhängig vom aktuellen Seitenzustand */
.cl-ch[data-room-sec="coffin"] { --acc: #e3a060; --dim: #bba48c; }
.cl-ch[data-room-sec="red"] { --acc: #ff4a36; --dim: #bfa09a; }
.cl-ch[data-room-sec="well"] { --acc: #78c8ff; --dim: #9fb5c0; }

/* Regler: Plugin-Bild im Raum der Seite */
.cl-ui { aspect-ratio: 1000 / 620; overflow: hidden; background: #000; margin-bottom: clamp(40px, 6vw, 70px); box-shadow: 0 40px 90px -30px #000, 0 0 80px -40px var(--acc); }
.is-claus[data-room="coffin"] .cl-ui [data-plate="coffin"], .is-claus[data-room="red"] .cl-ui [data-plate="red"], .is-claus[data-room="well"] .cl-ui [data-plate="well"] { opacity: 1; }
.cl-table-wrap { overflow-x: auto; }
.cl-table { width: 100%; border-collapse: collapse; }
.cl-table th { text-align: left; font: 500 .68rem/1 var(--jb); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); padding: 0 20px 14px 0; }
.cl-table td { padding: 16px 20px 16px 0; border-top: 1px solid color-mix(in srgb, var(--bone) 12%, transparent); vertical-align: top; color: var(--dim); }
.cl-table td:first-child { font: 500 .8rem/1.4 var(--jb); letter-spacing: .2em; color: var(--bone); white-space: nowrap; }
.cl-table small { display: block; letter-spacing: .08em; color: var(--acc); font-size: .66rem; margin-top: 4px; }
.cl-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: clamp(40px, 6vw, 70px); }
.cl-facts p { display: grid; gap: 8px; margin: 0; padding-top: 18px; border-top: 1px solid var(--acc); box-shadow: 0 -8px 16px -14px var(--acc); }
.cl-facts strong { font: 400 clamp(2.4rem, 4.6vw, 3.8rem)/.9 var(--anton); letter-spacing: .01em; }
.cl-facts span { color: var(--dim); font-size: .92rem; }

/* CTA */
.cl-end { padding-bottom: clamp(80px, 11vw, 150px); }
.cl-cta { max-width: 820px; margin-inline: auto; padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 70px); text-align: center; background: radial-gradient(80% 90% at 50% 100%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 70%), #000; }
.cl-cta h2 { margin: 0 0 16px; font: 400 clamp(2.6rem, 6vw, 4.8rem)/.95 var(--anton); text-transform: uppercase; }
.cl-cta > p { color: var(--dim); max-width: 34em; margin: 0 auto 26px; }
.cl-cta .cl-actions { justify-content: center; }

/* Kontakt-Modal: Filmstandbild */
.cl-dlg { width: min(560px, calc(100% - 32px)); padding: clamp(30px, 4vw, 46px); color: var(--bone); background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 70%), #050505; border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent); border-radius: 0; box-shadow: 0 0 70px -20px var(--acc), 0 40px 80px -30px #000; }
.cl-dlg::backdrop { background: rgba(0, 0, 0, .86); backdrop-filter: blur(2px) grayscale(1); }
.cl-dlg[open] { animation: cl-dlg-in .6s steps(1) , cl-dlg-fade .5s ease; }
@keyframes cl-dlg-in { 0% { opacity: .2; } 15% { opacity: 1; } 25% { opacity: .4; } 35% { opacity: 1; } }
@keyframes cl-dlg-fade { from { transform: scale(.985); } }
.cl-dlg-x { position: absolute; top: 18px; right: 18px; z-index: 4; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; background: none; color: var(--dim); border: 1px solid color-mix(in srgb, var(--bone) 30%, transparent); cursor: pointer; }
.cl-dlg-x:hover { color: var(--acc); border-color: var(--acc); }
.cl-dlg-t { margin: 0 48px 10px 0; font: 400 clamp(2.2rem, 5vw, 3rem)/.95 var(--anton); text-transform: uppercase; letter-spacing: .01em; }
.cl-dlg-sub { margin: 0 0 24px; color: var(--dim); line-height: 1.6; }
.cl-dlg-sub a { color: var(--acc); }
.cl-form { display: grid; gap: 18px; }
.cl-topics { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; border: 0; }
.cl-topics legend { width: 100%; margin-bottom: 10px; padding: 0; font: 500 .68rem/1 var(--jb); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.cl-topics label { position: relative; cursor: pointer; }
.cl-topics input { position: absolute; opacity: 0; pointer-events: none; }
.cl-topics span { display: inline-block; padding: 4px 0 6px; font: 400 1.3rem/1 var(--serif); color: var(--dim); border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.cl-topics input:checked + span { color: var(--bone); border-color: var(--acc); box-shadow: 0 8px 12px -12px var(--acc); }
.cl-topics input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 3px; }
.cl-field { display: grid; gap: 6px; }
.cl-field > span { font: 500 .68rem/1 var(--jb); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.cl-field em { font-style: normal; letter-spacing: .08em; text-transform: none; opacity: .7; }
.cl-field input, .cl-field textarea { width: 100%; padding: 10px 2px; font: 400 1.05rem/1.5 var(--font-sans); color: var(--bone); background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--bone) 30%, transparent); border-radius: 0; resize: vertical; }
.cl-field textarea { border: 1px solid color-mix(in srgb, var(--bone) 22%, transparent); padding: 10px 12px; }
.cl-field input:focus, .cl-field textarea:focus { outline: none; border-color: var(--acc); box-shadow: 0 8px 14px -12px var(--acc); }
.cl-field ::placeholder { color: color-mix(in srgb, var(--dim) 60%, transparent); }
.cl-field [aria-invalid="true"] { border-color: var(--acc); }
.cl-err { font: 500 .74rem/1.3 var(--jb); color: var(--acc); }
.cl-form .cl-btn { justify-self: start; }
.cl-dlg .cl-btn:disabled { opacity: .6; cursor: progress; }
.cl-dlg-done { text-align: center; padding: 10px 0 4px; }
.cl-dlg-done .cl-sub { margin: 0 0 18px; }
.cl-dlg-done .cl-btn { margin-inline: auto; }

/* ==========================================================================
   Header, Menüs und Footer im CLAUSTROPHOBIA-Look (nur auf body.is-claus)
   ========================================================================== */
.is-claus .site-header { --text: var(--bone); --muted: var(--dim); --surface-2: color-mix(in srgb, var(--acc) 10%, transparent); --line: color-mix(in srgb, var(--bone) 14%, transparent); --line-2: color-mix(in srgb, var(--bone) 28%, transparent); --glass: rgba(0, 0, 0, .7); color: var(--text); }
.is-claus .brand span { font: 400 1.15rem/1 var(--anton); letter-spacing: .04em; text-transform: uppercase; }
.is-claus .nav-links a, .is-claus .nav-drop-btn { font: 400 1.08rem/1 var(--serif); letter-spacing: 0; }
.is-claus .nav-pill { border-radius: 0; background: transparent; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--acc) 60%, transparent); }
.is-claus .nav-links a[aria-current="page"]::before, .is-claus .nav-drop-btn[aria-current="page"]::before { left: 12px; right: 12px; width: auto; height: 2px; bottom: 0; margin: 0; border-radius: 0; background: var(--acc); box-shadow: 0 0 10px var(--acc); }
.is-claus .icon-btn { font-family: var(--jb); }
.is-claus .search-btn kbd { border-radius: 0; }
.is-claus .nav-cta { background: transparent; color: var(--bone); border: 1px solid color-mix(in srgb, var(--bone) 55%, transparent); border-radius: 0; box-shadow: none; font: 500 .68rem/1 var(--jb); letter-spacing: .2em; text-transform: uppercase; }
.is-claus .nav-cta:hover { background: transparent; color: var(--acc); border-color: var(--acc); box-shadow: 0 0 20px -6px var(--acc); }
.is-claus .menu-toggle { border-radius: 0; }
.is-claus .avatar-btn { border-radius: 0; }
/* beim Scrollen: schwarzer Letterbox-Balken mit Sucher-Ecken und glühender Unterkante */
.is-claus .site-header.is-scrolled, .is-claus .site-header.is-scrolled:is(:hover, :focus-within) { border: 0; border-radius: 0; background: rgba(0, 0, 0, .88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 1px 0 color-mix(in srgb, var(--acc) 55%, transparent), 0 12px 30px -14px color-mix(in srgb, var(--acc) 50%, transparent); }
.is-claus .site-header::before, .is-claus .site-header::after { content: ''; position: absolute; top: 7px; bottom: 7px; width: 12px; border: 0 solid var(--acc); opacity: 0; pointer-events: none; transition: opacity .3s; }
.is-claus .site-header::before { left: -6px; border-width: 2px 0 2px 2px; }
.is-claus .site-header::after { right: -6px; border-width: 2px 2px 2px 0; }
.is-claus .site-header.is-scrolled::before, .is-claus .site-header.is-scrolled::after { opacity: .9; }
.is-claus .nav-menu, .is-claus .account-menu { --text: var(--bone); --muted: var(--dim); --surface-2: color-mix(in srgb, var(--acc) 12%, transparent); --line: color-mix(in srgb, var(--bone) 14%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent); border-radius: 0; background: rgba(4, 3, 3, .97); box-shadow: 0 0 40px -16px var(--acc), 0 24px 40px -18px #000; }
.is-claus .nav-menu a { border-radius: 0; }
.is-claus .nav-menu strong { font: 400 1.15rem/1.1 var(--serif); }
.is-claus .nav-menu-ico { border-radius: 0; background: transparent; border: 1px solid color-mix(in srgb, var(--acc) 50%, transparent); color: var(--acc); }
.is-claus .mobile-menu { --text: var(--bone); --muted: var(--dim); --line: color-mix(in srgb, var(--bone) 12%, transparent); --line-2: color-mix(in srgb, var(--bone) 28%, transparent); background: radial-gradient(90% 60% at 50% 100%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 70%), var(--bg); color: var(--text); }
.is-claus .mobile-menu li a { font: 400 clamp(2rem, 9vw, 3rem)/1.05 var(--serif); letter-spacing: -.01em; }
.is-claus .mobile-menu li a::before { content: counter(m, upper-roman); min-width: 2.4em; font: 500 .7rem var(--jb); color: var(--acc); }
.is-claus .mobile-menu li a:hover { color: var(--acc); }
.is-claus .mobile-menu .btn-primary { background: var(--bone); color: #000; border-radius: 0; box-shadow: none; font: 500 .8rem/1 var(--jb); letter-spacing: .18em; text-transform: uppercase; }
.is-claus .mobile-menu .chip { border-radius: 0; }
/* Footer: schwarzer Abspann-Balken mit Untertitel */
.is-claus .site-footer { --text: var(--bone); --muted: var(--dim); --muted-2: var(--dim); --line: color-mix(in srgb, var(--acc) 30%, transparent); --bg-2: transparent; background: #000; border-top: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); box-shadow: 0 -14px 34px -22px var(--acc); text-align: center; }
.is-claus .site-footer::before { content: '[ the door is locked from the outside ]'; display: block; padding-top: 28px; font: italic 400 1.1rem/1.3 var(--serif); color: #f4f1e6; }
.is-claus .site-footer.is-compact .footer-bottom { justify-content: center; column-gap: 32px; padding: 14px 0 26px; font: 500 .66rem/1.6 var(--jb); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.is-claus .footer-legal { justify-content: center; }
.is-claus .footer-legal a, .is-claus .footer-legal .linklike { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--dim); }
.is-claus .footer-legal a:hover, .is-claus .footer-legal .linklike:hover { color: var(--acc); }
.is-claus .to-top { border-radius: 0; background: rgba(0, 0, 0, .85); border-color: color-mix(in srgb, var(--acc) 40%, transparent); }
.is-claus .to-top:hover { background: var(--acc); color: #000; }
.is-claus .to-top-ring { display: none; }

/* Scroll-Leiste: Filmstreifen (ersetzt hier die Song-Waveform) */
.is-claus .wave-progress { display: none; }
.cl-scroll { --p: 0; position: fixed; z-index: 900; right: 12px; top: 50%; width: 30px; height: min(64vh, 560px); transform: translateY(-50%); cursor: pointer; touch-action: none; box-shadow: 0 0 26px -10px var(--acc); }
.cl-scroll canvas { display: block; width: 100%; height: 100%; }
.cl-scroll-t { position: absolute; right: calc(100% + 12px); top: calc(var(--p) * 100%); padding: 5px 8px; font: 500 .68rem/1 var(--jb); letter-spacing: .12em; color: var(--acc); background: #000; border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); transform: translateY(-50%); opacity: 0; transition: opacity .2s; pointer-events: none; white-space: nowrap; }
.cl-scroll:hover .cl-scroll-t, .cl-scroll.is-active .cl-scroll-t { opacity: 1; }

@media (max-width: 1100px) { .cl-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) {
    .cl-hero-grid { grid-template-columns: auto minmax(0, 1fr); }
    .cl-hero-shot { grid-column: 1 / -1; }
    .cl-ch, .cl-ch:nth-of-type(even) { grid-template-columns: 1fr; }
    .cl-ch:nth-of-type(even) .cl-ch-img { order: 0; }
}
@media (max-width: 768px) {
    .cl-scroll { top: 0; right: 0; left: 0; width: auto; height: 12px; transform: none; box-shadow: 0 2px 10px -4px var(--acc); }
    .cl-scroll-t { display: none; }
}
@media (max-width: 640px) {
    .cl-hero-grid { grid-template-columns: 1fr; }
    .cl-name { writing-mode: horizontal-tb; transform: none; font-size: clamp(2.6rem, 13.2vw, 4rem); line-height: .9; }
    .cl-desk { grid-template-columns: 1fr; justify-items: start; }
    .cl-play { width: 90px; height: 90px; }
    .cl-sub { font-size: .92rem; padding: 0 16px; }
    .cl-c { width: 16px; height: 16px; }
    .cl-table td:first-child { white-space: normal; }
}
@media print { .cl-scroll, .cl-film { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .cl-film::before, .cl-film::after, .cl-cut .cl-film::after, .cl-dlg[open] { animation: none; }
    .is-claus, .cl-plate, .cl-wall { transition: none; }
}
@media (max-width: 768px) { .is-claus .site-header::before, .is-claus .site-header::after { display: none; } }