/* PASSING ON LIGHT — Legal/Unterseiten · Design „Stilles Heiligtum" */
:root{color-scheme:only light;--aubergine:#241433;--plum:#3b2353;--violet:#7c5e9e;--lilac:#c9b3d9;--violet-text:#6d5388;--pearl:#fbf8fc;--gold:#c9a96e;--gold-lt:#e0c48c;--gold-text:#7d5f33;--text:#2b1f35;--muted:#695e74;--serif:'Cormorant Garamond',Georgia,serif;--sans:'DM Sans',system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--pearl);color:var(--text);line-height:1.7}
.skip-link{position:fixed;top:-100px;left:1rem;z-index:300;background:var(--gold);color:var(--aubergine);padding:.7rem 1.3rem;border-radius:0 0 12px 12px;font-weight:600;font-size:.9rem;transition:top .2s;text-decoration:none}
.skip-link:focus{top:0;outline:2px solid var(--aubergine);outline-offset:-4px}
a{color:var(--plum);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--gold-text)}
.topbar{background:var(--aubergine);padding:1.2rem 0}
.wrap{max-width:760px;margin:0 auto;padding:0 1.5rem}
.logo{font-family:var(--serif);color:#fff;font-size:1.4rem;letter-spacing:.04em;text-decoration:none}
.logo em{font-style:italic;color:var(--lilac)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.topbar-right{display:flex;align-items:center;gap:1.4rem}
.back{color:rgba(255,255,255,.72);font-size:.85rem;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;min-height:24px;padding:.2rem 0}
.back:hover{color:var(--lilac)}
.lang-switch{display:flex;align-items:center;gap:.2rem}
.lang-switch a{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.68);text-decoration:none;padding:.3rem .4rem;display:inline-flex;align-items:center;min-height:24px}
.lang-switch a:hover{color:var(--lilac)}
.lang-switch a[aria-current="true"]{color:var(--lilac);font-weight:600}
.lang-sep{color:rgba(255,255,255,.25);font-size:.7rem}
main{padding:3.5rem 0 5rem}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,5vw,3rem);color:var(--aubergine);margin-bottom:.4rem}
.rule{width:52px;height:2px;background:linear-gradient(90deg,var(--gold),rgba(201,169,110,.15));margin:1rem 0 2.5rem;border-radius:2px}
h2{font-family:var(--serif);font-weight:500;font-size:1.45rem;color:var(--aubergine);margin:2.4rem 0 .7rem}
h3{font-size:1rem;font-weight:600;color:var(--plum);margin:1.3rem 0 .4rem}
p,li{margin-bottom:.8rem;color:var(--muted)}
ul{padding-left:1.3rem;margin-bottom:1rem}
.card{background:#fff;border:1px solid rgba(59,35,83,.1);border-radius:14px;padding:1.4rem 1.6rem;margin-bottom:1.2rem;box-shadow:0 2px 12px rgba(59,35,83,.06)}
.card p{margin-bottom:.2rem;color:var(--text)}
.label{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text);margin:.8rem 0 .2rem}
.label:first-child{margin-top:0}
footer{background:var(--aubergine);padding:1.6rem 0;text-align:center}
footer p{color:rgba(255,255,255,.58);font-size:.78rem;margin:0}
footer a{color:rgba(255,255,255,.7);display:inline-block;padding:.2rem .1rem}

/* 404 */
body.nf{background:linear-gradient(168deg,var(--aubergine),var(--plum));color:#fff;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:2rem}
.nf .code{font-family:var(--serif);font-size:clamp(5rem,18vw,10rem);font-weight:300;color:var(--lilac);line-height:1}
.nf h1{font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,4vw,2.4rem);color:#fff;margin:.5rem 0 1rem}
.nf p{color:rgba(255,255,255,.65);max-width:40ch;margin:0 auto 2rem}
.nf .home-btn{display:inline-block;background:linear-gradient(135deg,var(--gold-lt),var(--gold) 55%,#b08f52);color:var(--aubergine);padding:.85rem 2.1rem;border-radius:50px;text-decoration:none;font-weight:500;letter-spacing:.03em;transition:box-shadow .3s,transform .25s;box-shadow:0 6px 20px rgba(201,169,110,.3)}
.nf .home-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(201,169,110,.45)}
.nf .logo{position:absolute;top:1.6rem;left:50%;transform:translateX(-50%)}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important}}

/* ── Atem-Visualizer (öffentlich) ─────────────────────────────────────────── */
.breathe-wrap{max-width:680px;margin:0 auto;text-align:center}
.breathe-eyebrow{justify-content:center}
.breathe-intro{color:var(--muted);line-height:1.7;max-width:48ch;margin:0 auto 2rem}
.breathe-root{margin:1.5rem 0}
.breathe-chooser{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:2.4rem}
.breathe-chip{display:flex;flex-direction:column;gap:.15rem;padding:.7rem 1.1rem;border:1px solid var(--gold-lt);border-radius:12px;background:#fff;cursor:pointer;font-family:var(--sans);transition:border-color .2s,box-shadow .2s,background .2s;min-width:140px}
.breathe-chip:hover{border-color:var(--gold)}
.breathe-chip.is-active{border-color:var(--plum);background:var(--pearl);box-shadow:0 6px 18px rgba(90,46,99,.12)}
.breathe-chip-name{font-weight:600;color:var(--aubergine)}
.breathe-chip-desc{font-size:.8rem;color:var(--muted)}
.breathe-stage{display:flex;align-items:center;justify-content:center;height:300px;margin:1rem 0}
.breathe-circle{width:240px;height:240px;border-radius:50%;background:radial-gradient(circle at 50% 40%, var(--lilac), var(--plum));box-shadow:0 0 60px rgba(150,90,160,.35);display:flex;align-items:center;justify-content:center;transform:scale(0.5);will-change:transform}
.breathe-circle-inner{display:flex;flex-direction:column;align-items:center;gap:.2rem;color:#fff}
.breathe-phase{font-family:var(--serif);font-size:1.25rem;letter-spacing:.02em}
.breathe-count{font-size:2rem;font-weight:300;font-variant-numeric:tabular-nums;min-height:1.2em}
.breathe-cycle{color:var(--muted);font-size:.9rem;min-height:1.2em;margin:.4rem 0 1.2rem}
.breathe-actions{display:flex;justify-content:center}
.breathe-start{border:none;cursor:pointer;font-family:var(--sans);min-width:160px}
.breathe-disclaimer{text-align:center;max-width:52ch;margin-left:auto;margin-right:auto}
@media(prefers-reduced-motion:reduce){.breathe-circle{transition:none !important}}
@media(max-width:560px){.breathe-stage{height:240px}.breathe-circle{width:190px;height:190px}}