/* MedicSongs - Unterseiten (Organe, Songs, Rechtliches) im selben Look wie die Startseite. */
:root{
  color-scheme:dark;
  --navy-deep:#16161F; --navy-indigo:#2C3E50; --dark-navy:#1E1E2E; --navy-raised:#252538; --navy-line:#353548; --navy-muted:#4A4A60;
  --orange:#C85A17; --orange-hover:#D96A27; --orange-press:#B24E10; --orange-soft:#3A2418;
  --plate:#0E1219;
  --bg-elevated:var(--dark-navy); --accent:var(--orange); --border:var(--navy-line);
  --fg1:#F5F0EB; --fg2:rgba(245,240,235,.72); --fg3:rgba(245,240,235,.52); --fg-disabled:rgba(245,240,235,.38);
  --s-2:8px; --s-3:16px; --s-4:24px; --s-5:32px; --s-6:48px; --s-7:64px; --s-8:96px;
  --radius-md:12px; --radius-lg:16px; --radius-pill:999px;
  --shadow-lg:0 6px 0 0 rgba(0,0,0,.45); --shadow-accent:0 3px 0 0 var(--orange-press);
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --ease-expo:cubic-bezier(.19,1,.22,1); --ease:var(--ease-out);
  --font-display:'Lora',Georgia,serif; --font-body:'Inter',system-ui,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --gutter:clamp(20px,4.6vw,72px);
}
*{box-sizing:border-box}
html{background:var(--navy-deep)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--navy-deep);color:var(--fg2);font:400 17px/1.65 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--font-display);color:var(--fg1);font-weight:700;overflow-wrap:break-word}
.copy{min-width:0}
em{font-style:italic;color:var(--accent)}
img{max-width:100%}
.mono{font:500 12px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg3)}
:focus-visible{outline:2px solid var(--fg1);outline-offset:4px;border-radius:6px}
::selection{background:var(--orange-soft);color:var(--fg1)}

/* Kopfzeile */
.top{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;gap:24px;padding:calc(env(safe-area-inset-top,0px) + 18px) var(--gutter) 18px;border-bottom:1px solid transparent;transition:background .3s var(--ease-out),border-color .3s,transform .5s var(--ease-out)}
.top.aw-solid{background:rgba(22,22,31,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--border)}
.top.aw-away{transform:translateY(-100%)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--fg1);font:700 19px/1 var(--font-display);letter-spacing:-.01em}
.brand svg{height:30px;width:auto}
.top nav{margin-left:auto;display:flex;gap:clamp(14px,1.6vw,26px);flex-wrap:wrap}
.top nav a{position:relative;font:500 12px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--fg2);transition:color .2s}
.top nav a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--fg1);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease-out)}
.top nav a:hover,.top nav a.aw-here{color:var(--fg1)}
.top nav a:hover::after{transform:scaleX(1);transform-origin:left}
.top nav a.aw-here::after{transform:scaleX(1);background:var(--accent)}
/* Kopfzeile Unterseiten: Untermenue Topics (User 27.10.: Fachgebiete statt Organe, wie auf der Startseite) */
.top .gmenu{position:relative;display:block;line-height:1}
.top .gm-btn{display:block;background:none;border:0;padding:0;cursor:pointer;font:500 12px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg2);transition:color .2s}
.top .gm-btn::after{content:" \25BE"}
.top .gm-btn:hover,.top .gm-btn[aria-expanded="true"]{color:var(--fg1)}
.top .gm-pan{position:absolute;right:0;top:30px;z-index:80;display:grid;gap:6px;min-width:300px;padding:12px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);transform-origin:top right;animation:awPop .22s var(--ease-out)}
@keyframes awPop{from{opacity:0;transform:scale(.96) translateY(-4px)}}
.top .gm-pan[hidden]{display:none}
.top nav .gm-pan a.ochip{display:flex;justify-content:space-between;align-items:center;padding:11px 16px;font:500 15px/1 var(--font-body);letter-spacing:0;text-transform:none;color:var(--fg1);text-decoration:none;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);transition:background .2s}
.top nav .gm-pan a.ochip::after{display:none}
.top nav .gm-pan a.ochip:hover{background:var(--navy-raised)}
.top nav .gm-pan a.ochip.aw-here{border-color:var(--accent)}
.top nav .gm-pan a.ochip b{font:600 13px/1 var(--font-mono);color:var(--fg2);margin-left:12px}
.crumbs{position:relative;z-index:3;padding:calc(env(safe-area-inset-top,0px) + 96px) var(--gutter) 0;display:flex;flex-wrap:wrap;gap:10px}
.crumbs a{text-decoration:none;color:var(--fg2)}
.crumbs a:hover{color:var(--fg1)}
.legal-nav{display:flex;gap:18px;flex-wrap:wrap}.legal-nav a{color:var(--fg2);text-decoration:none}.legal-nav a:hover{color:var(--fg1)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding-inline:20px;border-radius:var(--radius-md);font:600 15px/1 var(--font-body);text-decoration:none;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--fg1);transition:background .2s var(--ease),border-color .2s,transform 160ms var(--ease-out)}
.btn:hover{background:var(--navy-raised);border-color:var(--navy-muted)}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--orange-press);border-color:var(--orange-press);box-shadow:var(--shadow-md);font-weight:700}
.btn--primary:hover{background:var(--accent);border-color:var(--accent)}
.btn--primary:active{transform:translateY(2px);box-shadow:none;background:var(--orange-press)}
.btn svg{width:14px;height:14px}

/* HERO: Riesentitel unten links, Tafel wischt schraeg herein */
main{position:relative}
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,80px);align-items:end;padding:clamp(20px,2.5vw,40px) var(--gutter) clamp(40px,4vw,64px);min-height:calc(100svh - 120px);overflow:hidden;isolation:isolate}
.hero .plate{position:absolute;inset:0 0 0 auto;width:min(66vw,1120px);z-index:-1;background-size:cover;background-position:center;opacity:.92;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 42%),linear-gradient(0deg,transparent,#000 30%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 42%),linear-gradient(0deg,transparent,#000 30%);mask-composite:intersect;
  clip-path:polygon(100% 0,100% 0,100% 100%,118% 100%);animation:awWipe 1.3s var(--ease-in-out) .35s forwards,awCam 16s var(--ease-in-out) 1.6s infinite alternate}
@keyframes awWipe{to{clip-path:polygon(-18% 0,100% 0,100% 100%,0 100%)}}
@keyframes awCam{from{transform:scale(1)}to{transform:scale(1.08) translate(-1%,0)}}
.hero .copy{position:relative;z-index:2;display:grid;gap:26px;align-content:end}
.hero h1{font-size:clamp(64px,var(--fit,13vw),300px);line-height:.94;letter-spacing:-.05em;text-wrap:balance;overflow-wrap:normal;padding-bottom:.26em;margin-bottom:-.06em}
.aw-organ .hero{grid-template-columns:1fr}
.aw-organ .hero h1{font-size:clamp(84px,21vw,380px);line-height:.86;letter-spacing:-.065em;white-space:nowrap;padding-bottom:.24em}
.aw-organ .hero .copy{grid-template-columns:minmax(0,1fr) minmax(0,46ch);align-items:end;column-gap:clamp(24px,5vw,80px)}
.aw-organ .hero .copy>.mono{grid-column:1/-1}
.aw-organ .hero .copy h1{grid-column:1/-1}
.aw-organ .hero .sub{grid-column:2;padding:18px 22px;background:rgba(22,22,31,.78);border:1px solid var(--border);border-radius:var(--radius-md)}
.hero .sub{font-size:clamp(19px,1.5vw,22px);line-height:1.5;max-width:46ch;color:var(--fg1)}

/* Song-Seite: Plattenspieler und Plattenkiste (deck.js, User 26.10.) */
.aw-deck{position:relative;z-index:1;align-self:center;justify-self:end;width:min(100%,620px)}
.aw-ph{aspect-ratio:16/9}@media (min-width:901px){.aw-ph{display:none}}
.aw-stage{position:relative;z-index:2}
.aw-tt{display:block;width:75%;height:auto;margin-left:25%;position:relative;z-index:1}
.aw-tt-top{position:absolute;top:0;left:25%;margin:0;z-index:4;pointer-events:none;overflow:visible}
.aw-arm{transform-box:view-box;transform-origin:330px 70px}
.aw-hold{position:absolute;left:0;top:50%;width:40%;aspect-ratio:1;z-index:3;opacity:0;transform:translate3d(-26%,-50%,0) rotate(-7deg) scale(.94);transition:transform 1.1s var(--ease-out),opacity .45s}
.aw-hold::after{content:"";position:absolute;inset:0;border-radius:4px;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.13) 44%,rgba(255,255,255,0) 54%),linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 30%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.aw-hold img{display:block;width:100%;height:100%;object-fit:cover;border-radius:4px;box-shadow:10px 12px 0 rgba(0,0,0,.45)}
.aw-up .aw-hold{opacity:1;transform:translate3d(0,-50%,0) scale(1)}
.aw-on .aw-hold{z-index:0;transform:translate3d(-14%,-50%,0) rotate(-6deg);transition:transform .9s var(--ease-out) .95s,z-index 0s .95s}
.aw-rec{position:absolute;left:37.5625%;top:17.3333%;width:36.75%;aspect-ratio:1;z-index:2;opacity:0;transform:translate3d(-97.96%,0,0);transition:transform 1s cubic-bezier(.45,0,.2,1),opacity 0s .85s}
.aw-up .aw-rec{opacity:1}
.aw-on .aw-rec{transform:none}
.aw-stage{cursor:pointer}
.aw-on .aw-rec{cursor:grab}.aw-grab .aw-rec{cursor:grabbing}
.aw-shine{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:conic-gradient(from 20deg,rgba(255,255,255,0) 0deg,rgba(255,255,255,.07) 30deg,rgba(255,255,255,0) 62deg,rgba(255,255,255,0) 200deg,rgba(255,255,255,.05) 228deg,rgba(255,255,255,0) 258deg);-webkit-mask:radial-gradient(circle,transparent 35%,#000 36%);mask:radial-gradient(circle,transparent 35%,#000 36%)}
.aw-vinyl{display:block;width:100%;height:100%;border-radius:50%;will-change:transform}
/* Schatten an der stehenden Ebene, nicht an der drehenden Platte (sonst wandert er mit und die Platte scheint zu eiern) */
.aw-rec{border-radius:50%;box-shadow:0 8px 22px rgba(0,0,0,.55)}
.aw-on .aw-rec{touch-action:none}
/* Organ-Seite: Plattenkiste mit den Songs dieses Organs (crate.js, User 26.10.) */
.aw-cr-sec{padding:0 var(--gutter);height:250svh}
@media (min-width:901px){.aw-cr-ph{height:var(--crh)}}@media (prefers-reduced-motion:reduce){.aw-cr-ph{display:none}}
.aw-cr-pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;padding-top:clamp(100px,9vw,140px);background:radial-gradient(ellipse 34% 62% at 22% 30%,rgba(255,228,196,.11),transparent 72%),radial-gradient(ellipse 60% 40% at 22% 88%,rgba(0,0,0,.35),transparent 70%)}
.aw-crate{position:relative;width:100%;height:clamp(300px,27vw,400px);cursor:pointer;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.aw-box{position:absolute;left:4%;bottom:0;width:min(38%,440px);height:100%;perspective:1600px;perspective-origin:50% -20%}
.aw-slots{position:absolute;left:9%;right:9%;bottom:10%;aspect-ratio:1;transform-style:preserve-3d;transform-origin:50% 100%;transform:rotateX(9deg)}
.aw-slot{position:absolute;inset:0;display:block;border-radius:4px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 2px,transparent 2px 5px),linear-gradient(180deg,#34344A,#22222F 38%,#1A1A25);border-top:2px solid #3A3A50;transform-origin:50% 100%;transform:translate3d(0,calc(var(--y,0px) + var(--d,0) * -9px),calc(var(--i) * -12px)) rotateX(var(--r,0deg));box-shadow:0 -6px 14px rgba(0,0,0,.35)}
.aw-slot i{position:absolute;inset:0;z-index:1;border-radius:4px;background:center/cover no-repeat}
.aw-slot .aw-sh{position:absolute;inset:0;z-index:2;border-radius:4px;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.25),#000 120%);opacity:.32}
.aw-slot .aw-v{position:absolute;left:6%;top:3%;width:88%;aspect-ratio:1;z-index:0;opacity:0;outline:1px solid rgba(255,255,255,.12);outline-offset:-1px;border-radius:50%;background:radial-gradient(circle,#0D0D12 0 1.6%,#C85A17 1.7% 2.6%,#1F2A44 2.7% 15%,#0A0A0E 15.5% 16.5%,transparent 17%),repeating-radial-gradient(circle,#09090D 0 1.5px,#16161D 1.5px 3px);box-shadow:0 -6px 16px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.05)}
.aw-slot .aw-v::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 300deg,transparent 0 20deg,rgba(255,255,255,.10) 40deg,transparent 70deg 200deg,rgba(255,255,255,.06) 225deg,transparent 250deg)}
.aw-slot i::after{content:"";position:absolute;inset:0;border-radius:4px;background:linear-gradient(118deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.12) 45%,rgba(255,255,255,0) 54%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.aw-slot.aw-past{--r:-56deg}
.aw-slot.aw-past i{opacity:.55}
.aw-slot.aw-past1{--r:-44deg}
.aw-slot.aw-lift{--r:-3deg;--y:-34%}
.aw-slot.aw-lift i{opacity:1}
.aw-slot.aw-take{--y:-150%;--r:0deg;opacity:0;transition:transform .5s cubic-bezier(.5,0,.3,1),opacity .2s .3s}
.aw-crate.aw-wait .aw-slot{--y:-130%;opacity:0;transition:none}
.aw-crate.aw-fill .aw-slot{transition:transform .7s cubic-bezier(.3,1.25,.4,1) calc(var(--o) * 70ms),opacity .3s calc(var(--o) * 70ms)}
.aw-front{position:absolute;left:-5%;right:-5%;bottom:0;height:36%;z-index:2;border-radius:5px 5px 9px 9px;
  background:
   linear-gradient(180deg,rgba(255,226,190,.10),rgba(0,0,0,0) 30%,rgba(0,0,0,.35)),
   linear-gradient(180deg,transparent 0 32%,#0E0E14 32% 34.5%,transparent 34.5% 66%,#0E0E14 66% 68.5%,transparent 68.5%),
   repeating-linear-gradient(176deg,rgba(255,255,255,.035) 0 1px,transparent 1px 7px),
   repeating-linear-gradient(183deg,rgba(0,0,0,.18) 0 2px,transparent 2px 11px),
   linear-gradient(90deg,#2B2622,#3A322B 30%,#332C26 70%,#28231F);
  border:1px solid #4A4038;box-shadow:0 26px 50px -10px rgba(0,0,0,.75),inset 0 2px 0 rgba(255,236,214,.12),inset 0 -2px 0 rgba(0,0,0,.4)}
.aw-box::before{content:"";position:absolute;left:-5%;right:-5%;bottom:24%;height:66%;z-index:0;clip-path:polygon(0 100%,6% 0,94% 0,100% 100%);
  background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.15) 12%,rgba(0,0,0,.7) 14%,rgba(0,0,0,.75) 86%,rgba(0,0,0,.15) 88%,rgba(0,0,0,.55)),repeating-linear-gradient(176deg,rgba(255,255,255,.03) 0 1px,transparent 1px 7px),linear-gradient(90deg,#2B2622,#3A322B 50%,#28231F)}
.aw-slot::after{content:attr(data-t);position:absolute;left:9%;right:9%;bottom:9%;font:600 9px/1.3 var(--font-mono,ui-monospace,monospace);letter-spacing:.12em;text-transform:uppercase;color:rgba(232,220,200,.38);pointer-events:none}
.aw-box::after{content:"";position:absolute;left:-8%;right:-8%;bottom:-7%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);z-index:0}
.aw-box>.aw-front{--m:linear-gradient(135deg,#8A8579,#4A463F)}
.aw-front .aw-c{display:none}
.aw-front::before{content:attr(data-l);position:absolute;left:0;right:0;bottom:13%;text-align:center;font:700 12px/1 var(--font-mono,ui-monospace,monospace);letter-spacing:.34em;text-transform:uppercase;color:rgba(232,220,200,.42);text-shadow:0 1px 0 rgba(0,0,0,.6)}
.aw-front::after{content:"";position:absolute;left:36%;right:36%;top:24%;height:20%;border-radius:999px;background:#111118;box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
.aw-info{position:absolute;left:50%;right:0;top:50%;transform:translateY(-50%);display:grid;gap:14px;cursor:default}
.aw-info b{font:600 clamp(28px,3.2vw,52px)/1.08 var(--font-display);letter-spacing:-.02em;color:var(--fg1);min-height:1.08em;text-wrap:balance}
.aw-info .mono{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg2)}
.aw-info .aw-fac{font:400 17px/1.4 var(--font-body,inherit);color:var(--fg2);min-height:1.4em}
.aw-info .aw-hint{color:var(--accent)}
.aw-tl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:2px;max-width:560px}
.aw-tl li{position:relative;display:flex;align-items:center;border-radius:8px;transition:background .25s}
.aw-tl li:hover,.aw-tl li.aw-on{background:rgba(255,255,255,.05)}
.aw-tl-t{display:flex;align-items:baseline;gap:14px;flex:1;min-width:0;padding:7px 12px;border:0;background:none;color:var(--fg2);font:500 16px/1.35 var(--font-body,inherit);text-align:left;cursor:pointer;transition:color .25s}
.aw-tl-x{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aw-tl-t:hover,.aw-tl li.aw-on .aw-tl-t{color:var(--fg1)}
.aw-tl-n{font:600 11px/1 var(--font-mono,ui-monospace,monospace);letter-spacing:.1em;color:rgba(185,183,174,.5);min-width:2ch;transition:color .25s}
.aw-tl li.aw-on .aw-tl-n{color:var(--accent)}
.aw-tl-d{font:500 12px/1 var(--font-mono,ui-monospace,monospace);color:rgba(185,183,174,.55)}
.aw-tl-p{flex:none;width:30px;height:30px;margin-right:6px;border:0;border-radius:50%;background:transparent;color:var(--fg2);font-size:11px;line-height:30px;text-align:center;cursor:pointer;opacity:.35;transition:opacity .2s,background .2s,color .2s}
.aw-tl li:hover .aw-tl-p,.aw-tl-p:focus-visible,.aw-tl li.aw-on .aw-tl-p{opacity:1}
.aw-tl li.aw-on .aw-tl-p,.aw-tl-p:hover{background:var(--orange-press,#A9480F);color:#fff}
.aw-tl-t:focus-visible,.aw-tl-p:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.aw-box{cursor:pointer}
.aw-track{display:block;width:min(280px,100%);height:2px;margin-top:4px;background:var(--border);border-radius:2px;overflow:hidden}
.aw-bar{display:block;width:100%;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
@media (max-width:900px){
  /* Handy: Kiste steht oben (sticky), die Titelliste laeuft darunter durch */
  .aw-cr-sec{padding:0 var(--gutter)}
  .aw-cr-pin{position:static;height:auto;display:block;padding-top:24px;background:none}
  .aw-crate{height:auto;cursor:default}
  .aw-box{position:sticky;top:var(--hdr,96px);left:auto;bottom:auto;width:auto;height:min(44svh,360px);margin:0 calc(var(--gutter) * -1);z-index:3;background:linear-gradient(180deg,var(--navy-deep,#12121A) 88%,rgba(18,18,26,0))}
  .aw-box .aw-slots{left:26%;right:26%;bottom:14%}
  .aw-box .aw-front{left:20%;right:20%;height:28%;bottom:0}
  .aw-box::before{left:16%;right:16%;bottom:28%}
  .aw-box::after{left:14%;right:14%;bottom:2%}
  .aw-info{position:relative;left:auto;right:auto;top:auto;transform:none;margin-top:16px;padding-bottom:40svh}
  .aw-tl{max-width:none;min-width:0}
  .aw-info{grid-template-columns:minmax(0,1fr)}
  .aw-tl-t{padding:12px 10px;font-size:16px}
  .aw-tl-p{width:36px;height:36px;line-height:36px;opacity:.6}
}
.aw-instant .aw-rec,.aw-instant .aw-hold,.aw-instant .aw-arm{transition:none!important}
.aw-np{position:fixed;inset:0;z-index:9000;display:grid;place-content:center;justify-items:center;gap:18px;background:#12121A;opacity:0;transition:opacity .45s ease;pointer-events:none}
.aw-np.aw-vis{opacity:1}
.aw-np-w{position:relative;display:block;width:min(42vmin,360px);aspect-ratio:1;border-radius:50%;box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 2px #3A3A4A,0 0 80px rgba(255,228,196,.08)}
.aw-np-w::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:conic-gradient(from 20deg,transparent 0 25deg,rgba(255,255,255,.16) 45deg,transparent 70deg 200deg,rgba(255,255,255,.1) 225deg,transparent 250deg)}
.aw-np-v{position:relative;display:block;width:100%;height:100%;border-radius:50%;background:repeating-radial-gradient(circle,#15151C 0 1.5px,#2A2A36 1.5px 3px);animation:awNp 1.8s linear infinite}
.aw-np-v i{position:absolute;inset:33%;border-radius:50%;background:#1F2A44 center/140% no-repeat;box-shadow:0 0 0 3px #0A0A0E,0 0 0 4px rgba(200,90,23,.7)}
.aw-np-v i::after{content:"";position:absolute;left:47%;top:47%;width:6%;height:6%;border-radius:50%;background:#0A0A0E}
.aw-np .mono{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg2)}
.aw-np strong{font:600 clamp(26px,3vw,44px)/1.1 var(--font-display);color:var(--fg1);text-align:center;max-width:22ch}
@keyframes awNp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.aw-deck *,.aw-crate *{transition:none!important}}
.player{position:relative;z-index:2;display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;padding:16px;border:1px solid var(--border);border-radius:var(--radius-lg);background:rgba(22,22,31,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:600px;box-shadow:var(--shadow-lg)}
.player img{width:96px;height:96px;border-radius:4px;display:block;object-fit:cover}
.player .ctl{display:grid;gap:12px;min-width:0}
.player b{font:600 20px/1.25 var(--font-display);color:var(--fg1)}
.prog{height:3px;background:var(--border);border-radius:3px;overflow:hidden}.prog i{display:block;height:100%;width:0;background:var(--accent)}
.btns{display:flex;flex-wrap:wrap;gap:10px}

/* Abschnitte */
section{position:relative;padding:clamp(72px,8vw,120px) var(--gutter);border-top:1px solid var(--border)}
.sec-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 32px;margin-bottom:clamp(32px,4vw,56px)}
.sec-h h2{font-size:clamp(40px,6.4vw,104px);line-height:1.02;padding-bottom:.12em;letter-spacing:-.045em;max-width:16ch}
.sec-h>a.mono{color:var(--fg1);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:6px;text-decoration-thickness:2px}
.sec-h>a.mono:hover{color:var(--accent)}
.intro{max-width:62ch;font-size:19px}
section.pts-sec{padding-block:clamp(40px,4vw,64px)}

/* Steckbrief wie ein Abspann: kleines Label ueber grossem Wert, auf Haarlinien */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.facts div{padding:22px 24px 26px;border-left:1px solid var(--border);display:grid;gap:10px;align-content:start}
.facts div:first-child{border-left:0;padding-left:0}
.facts b{font:600 clamp(22px,2.2vw,34px)/1.15 var(--font-display);color:var(--fg1);letter-spacing:-.01em}
.genre{display:flex;align-items:baseline;gap:18px;padding:20px 0;border-top:1px solid var(--border)}
.genre b{font:italic 600 clamp(28px,3.4vw,52px)/1.1 var(--font-display);color:var(--fg1);letter-spacing:-.02em}

/* Kernpunkte */
.pts{max-width:1200px}
.pts summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:22px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);transition:background .2s}
.pts summary .mono:first-child{font-size:13px;color:var(--fg1)}
.pts summary::-webkit-details-marker{display:none}
.pts summary::after{content:'+';margin-left:auto;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--border);border-radius:50%;font:400 20px/1 var(--font-body);color:var(--fg1);transition:transform .3s var(--ease-out),background .2s}
.pts summary:hover::after{background:var(--navy-raised)}
.pts[open] summary::after{content:'−'}
/* Kernpunkte immer offen (User 27.10.: "wenn die nicht zuklappbar werden"): kein Auf/Zu-Knopf */
.pts summary{cursor:default}
.pts summary::after{display:none}
.pts summary:hover{background:none}
.pts-n{color:var(--fg3)}
.pts ul{margin:28px 0 0;padding:0;list-style:none;columns:2 380px;column-gap:56px;counter-reset:pt}
.pts li{break-inside:avoid;position:relative;padding:0 0 0 44px;margin:0 0 18px;font:400 17px/1.6 var(--font-display);color:var(--fg2);counter-increment:pt}
.pts li::before{content:'';position:absolute;left:0;top:.72em;width:26px;height:1px;background:var(--accent)}
.pts strong{color:var(--fg1);font-weight:600}

/* Song-Raster */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:48px 22px}
.card{position:relative;display:grid;gap:12px;text-decoration:none;align-content:start}
.card .aw-art{position:relative;display:block}
.card img{position:relative;z-index:2;width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px;display:block;box-shadow:0 6px 0 -2px rgba(0,0,0,.5);transition:transform .4s var(--ease-out)}
.card .aw-vin{position:absolute;z-index:1;top:6%;left:6%;width:88%;height:88%;border-radius:50%;background:repeating-radial-gradient(circle,#111 0 2px,#1b1b22 2px 4px);transition:transform .55s var(--ease-out)}
.card .aw-vin::after{content:"";position:absolute;inset:36%;border-radius:50%;background:var(--accent);box-shadow:inset 0 0 0 5px var(--orange-press)}
@media (hover:hover) and (pointer:fine){.card:hover img{transform:translateY(-6px)}.card:hover .aw-vin{transform:translateX(34%)}}
.card .ph{display:grid;place-items:center;aspect-ratio:1;border-radius:4px;background:var(--dark-navy);border:1px solid var(--border);padding:12px;text-align:center;font:600 16px/1.25 var(--font-display);color:var(--fg1)}
.card>span:not(.ph):not(.aw-art){font:600 18px/1.25 var(--font-display);color:var(--fg1);letter-spacing:-.01em}
.card .facet{font:500 13px/1.4 var(--font-mono);letter-spacing:.04em;color:var(--fg3)}
.card q{font:italic 15px/1.45 var(--font-display);color:var(--fg2)}
.grid .card{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease-out) calc(var(--i,0) * 40ms),transform .7s var(--ease-out) calc(var(--i,0) * 40ms)}
.grid.aw-in .card{opacity:1;transform:none}

/* Rechtliches: eine Lesespalte */
main.legal{max-width:820px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 130px) var(--gutter) var(--s-8)}
main.legal section{padding:48px 0;border-top:1px solid var(--border);scroll-margin-top:100px}
main.legal h1{font-size:clamp(56px,9vw,130px);line-height:.96;letter-spacing:-.05em;margin-bottom:28px;padding-bottom:.22em}
main.legal h2{font-size:clamp(34px,4.4vw,58px);line-height:1.04;padding-bottom:.1em;letter-spacing:-.035em;margin-bottom:22px}
main.legal h3,main.legal h4{font:600 16px/1.4 var(--font-body);color:var(--fg1);margin:26px 0 8px}
main.legal p,main.legal address{font:400 17px/1.7 var(--font-body);color:var(--fg2);font-style:normal}
main.legal .copy{margin-bottom:24px}

/* Fuss */
.foot{position:relative;border-top:1px solid var(--border);padding:64px var(--gutter) calc(32px + env(safe-area-inset-bottom,0px));display:grid;gap:48px;font:400 16px/1.65 var(--font-body);overflow:hidden}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:32px}
.foot-brand{display:grid;gap:16px;align-content:start}.foot-brand p{max-width:30ch;font-size:16px}
.foot nav{display:grid;gap:10px;align-content:start}.foot nav a{text-decoration:none;color:var(--fg2);font-size:16px}.foot nav a:hover{color:var(--fg1)}
.foot svg{height:32px;width:auto}

@media (max-width:900px){
  .top nav{display:none}
  .crumbs{padding-top:84px}
  .hero{grid-template-columns:1fr;min-height:auto;align-items:start}
  .hero .plate{width:100%;opacity:.38;transition:opacity .6s ease}.plate[data-bg]{opacity:0}
  .hero h1{font-size:clamp(46px,var(--fitm,16vw),110px)}
  .aw-organ .hero h1{font-size:clamp(64px,22vw,150px)}
  .aw-organ .hero .copy{grid-template-columns:1fr}
  .aw-organ .hero .sub{grid-column:1}
  .aw-deck{width:min(calc(100% - 2 * var(--gutter)),480px);margin:0 auto 12px}
  .hero .copy:has(> .aw-deck){gap:18px}
 /* Song-Seite: Plattenspieler und Play-Knopf im ersten Bildschirm */
  .facts{grid-template-columns:1fr 1fr}
  .facts div:nth-child(3){border-left:0;padding-left:0}
  .facts div:nth-child(n+3){border-top:1px solid var(--border)}
  .facts div:nth-child(2n){padding-left:18px}
  .foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 14px}
}
@media (max-width:480px){.player{grid-template-columns:64px minmax(0,1fr);gap:14px;padding:12px}.player img{width:64px;height:64px}.player .ctl{gap:10px}.btns .btn{height:44px;padding-inline:14px;font-size:14px}}
/* Handy: Menueband immer oben sichtbar (User 17.10.) - waagerecht wischbar unter der Kopfzeile */
@media (max-width:900px){
  .top{flex-wrap:wrap;row-gap:6px;padding-bottom:4px;background:rgba(22,22,31,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--border)}
  .top nav{display:flex;flex-wrap:nowrap;order:3;flex:1 0 100%;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter);gap:22px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .top nav::-webkit-scrollbar{display:none}
  .top nav a{flex:none;white-space:nowrap;padding:12px 0}
  .top nav a::after{bottom:4px}
  .top .gm-btn{flex:none;white-space:nowrap;padding:12px 0}
  .top .gmenu{position:static;flex:none}
  .top .gm-pan{position:fixed;top:100%;left:var(--gutter);right:var(--gutter);min-width:0;grid-template-columns:1fr;transform-origin:top center}
  .crumbs{padding-top:128px}
  .top::after{content:"";position:absolute;right:0;bottom:1px;width:56px;height:42px;background:linear-gradient(90deg,rgba(22,22,31,0),rgba(22,22,31,.95));pointer-events:none}
}


/* Handy: Randblenden des Menuebands nur, wenn es in diese Richtung weitergeht (Klassen nav-l/nav-r aus award.js);
   am Ende des Bands bleibt das letzte Wort voll lesbar (User 19.10.) */
@media (max-width:900px){.top::after{opacity:0;transition:opacity .2s}.top.nav-r::after{opacity:1}.top::before{content:"";position:absolute;left:0;bottom:1px;width:56px;height:42px;z-index:1;background:linear-gradient(270deg,rgba(22,22,31,0),rgba(22,22,31,.95));pointer-events:none;opacity:0;transition:opacity .2s}.top.nav-l::before{opacity:1}}
@media (max-width:900px){.top::after{z-index:1}}
/* Handy: am Ende des Bands bleibt rechts Platz, damit das letzte Wort ganz zu sehen ist (Safari ignoriert padding-right beim Scrollen) */
@media (max-width:900px){.top nav::after{content:"";flex:0 0 1px}}
/* Quellen und Pruefdatum je Song (Vorlage 26.10.; aktiv erst, wenn build/quellen.json Eintraege hat) */
.pts sup.ref{font:600 11px/1 var(--font-mono);margin-left:4px;vertical-align:super}
.pts sup.ref a{color:var(--fg2);text-decoration:none;padding:0 1px}
.pts sup.ref a:hover{color:var(--fg1);text-decoration:underline}
.pts .src{margin-top:28px;padding-top:22px;border-top:1px solid var(--border)}
.pts .src h3{margin:0 0 14px;font-size:13px;color:var(--fg1)}
.pts .src ol{margin:0;padding-left:22px;display:grid;gap:10px;font:400 15px/1.55 var(--font-body);color:var(--fg2)}
.pts .src ol li:target{color:var(--fg1)}
.pts .src a{color:var(--fg1);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.pts .src .src-how{display:inline-block;margin-top:18px;font-size:13px}
.pts .src ol li{padding-left:4px;margin:0;font:400 15px/1.55 var(--font-body);break-inside:auto}
.pts .src ol li::before{display:none}
/* Handy: die Kopfzeile hat ihren Hintergrund schon, kein Uebergang beim Scrollen (28.10. gemessen: 6 Bilder mit 33 ms beim Wechsel auf aw-solid) */
@media (max-width:900px){.top,.top.aw-solid{transition:none;background:rgba(22,22,31,.92)}}

/* Ladeanzeige am Play-Knopf (Livegang-Pruefung 01.11.2026, Punkt 12) */
#pb.is-loading svg{animation:pb-pulse 1s ease-in-out infinite}@keyframes pb-pulse{50%{opacity:.35}}@media (prefers-reduced-motion:reduce){#pb.is-loading svg{animation:none}}
/* Handlungsknopf im ersten Bildschirm (Pruefung vor dem Livegang 03.11.): Themen-, Rechts- und 404-Seite */
.cta1{margin-top:22px}