@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root{--ink:#0a1019;--mid:#142432;--gold:#d9ba78;--gold2:#a78649;--text:#f0ece3;--muted:#b2bac1;--line:#a88a533d;--panel:#14202dc9}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--ink);color:var(--text);margin:0;font:15px/1.75 Inter,system-ui,sans-serif}body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 70% 10%,#2143545c,transparent 60%),radial-gradient(ellipse at 10% 70%,#281f3a4c,transparent 55%),linear-gradient(115deg,#09111a,#090d15)}a{color:inherit;text-decoration:none}a:hover{color:var(--gold)}button{font:inherit}.skip{position:absolute;top:-100px;left:10px;background:var(--gold);color:#090f18;z-index:99;padding:10px}.skip:focus{top:10px}.topbar{height:84px;position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:0 clamp(20px,4vw,90px);border-bottom:1px solid #b3915744;background:#0b131ceE;backdrop-filter:blur(16px)}.brand{display:flex;align-items:center;gap:12px;letter-spacing:.16em;font:600 16px/1.12 'Cormorant Garamond',serif;color:#f2dbab;white-space:nowrap}.brand small{display:block;font-size:13px;letter-spacing:.32em;margin-top:5px}.brand-mark{width:37px;height:37px;border:1px solid var(--gold2);border-radius:50%;display:grid;place-items:center;font-size:24px}.topbar nav{display:flex;gap:clamp(10px,1.3vw,23px);align-items:center}.topbar nav a{font-size:11px;font-weight:600;letter-spacing:.04em;color:#ddd6c8}.topbar nav a:hover,.topbar nav a.active{color:var(--gold)}.menu-toggle{display:none;background:none;border:1px solid #94784d;color:var(--gold);padding:6px 12px}.hero{position:relative;min-height:min(850px,92svh);display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line)}.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse 12% 42% at 50% 54%,#e9bb6666,transparent 70%),radial-gradient(ellipse 45% 50% at 50% 80%,#123f49,transparent 85%),linear-gradient(to bottom,#0b121b83,#11192650 47%,#09111af6 96%),url('assets/hero.webp') center center / cover no-repeat;transform:scale(1.03)}.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#0a1019 2%,transparent 38%),linear-gradient(90deg,#080e1699,transparent 30%,transparent 70%,#080e1699)}.hero-content{padding:140px 20px 115px;max-width:1000px}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.34em;color:var(--gold);font-weight:700}.hero .eyebrow{margin-bottom:24px}.hero h1{font:500 clamp(62px,10.1vw,150px)/.86 'Cormorant Garamond',Georgia,serif;letter-spacing:.025em;margin:12px 0 30px;text-shadow:0 5px 35px #0009}.hero h1 span{display:block;font-size:.46em;letter-spacing:.25em;margin-bottom:20px;color:#ead6ac}.hero .tagline{font:400 clamp(24px,3vw,37px)/1.2 'Cormorant Garamond',serif;color:#faecd0;margin:0 auto 18px;max-width:760px}.hero .byline{color:#d1c9b8;letter-spacing:.1em}.actions{display:flex;justify-content:center;gap:13px;flex-wrap:wrap;margin-top:35px}.button{border:1px solid #c7a76f;color:#f9e8c3;display:inline-flex;justify-content:center;align-items:center;min-height:51px;padding:12px 26px;text-transform:uppercase;letter-spacing:.11em;font-size:11px;font-weight:700;transition:background .2s,color .2s}.button.primary{background:linear-gradient(135deg,#b89a60,#d9bd85);color:#10151c}.button:hover{background:#e6c98e;color:#10151c}.scroll{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);letter-spacing:.3em;font-size:10px;color:#ddcda7}section{padding:100px clamp(22px,7vw,120px)}.container{max-width:1160px;margin:auto}.section-head{text-align:center;max-width:800px;margin:0 auto 55px}.section-head h2,.page-title,.section-title{font:500 clamp(43px,5.5vw,76px)/1.02 'Cormorant Garamond',Georgia,serif;margin:14px 0 18px;color:#f7ead2}.section-head p,.intro-copy{font-size:17px;color:#c6c9cc}.rule{width:85px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:24px auto}.intro{background:radial-gradient(ellipse at center,#2030435a,transparent 70%);text-align:center}.intro .intro-copy{max-width:750px;margin:auto}.intro .intro-copy strong{font:500 25px/1.4 'Cormorant Garamond',serif;color:var(--gold);display:block;margin-bottom:22px}.stats{margin-top:38px;color:var(--gold);letter-spacing:.22em;font-size:12px;text-transform:uppercase}.grids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.card{background:linear-gradient(155deg,#192838dd,#101824eb);border:1px solid var(--line);overflow:hidden;transition:transform .3s,border-color .3s}.card:hover{transform:translateY(-5px);border-color:#c3a46f8a}.card .art{height:245px;position:relative;overflow:hidden;background:linear-gradient(145deg,var(--a,#243d4c),#0c1320);display:grid;place-items:center}.card .art::before{content:"";width:170px;height:170px;border:1px solid #dfc28970;border-radius:50%;box-shadow:0 0 0 20px #ccac5520,0 0 0 50px #ad9a4b0d,0 0 65px #e1b96b45;position:absolute}.card .art::after{content:"✦";font:90px 'Cormorant Garamond';color:#d4b77b8a;position:relative}.card .art span{position:absolute;bottom:18px;left:23px;color:#fae6bd;font:500 11px Inter;letter-spacing:.2em}.card-body{padding:29px}.card h3{font:500 32px/1 'Cormorant Garamond';margin:0 0 12px;color:#f6e8c8}.card p{color:#b9c0c8;font-size:14px;line-height:1.75}.card a.more{font-size:11px;text-transform:uppercase;letter-spacing:.2em;color:var(--gold);font-weight:700}.chapter-mark{color:var(--gold);letter-spacing:.25em;text-transform:uppercase;font-size:11px;margin-bottom:10px}.chapter-banner{padding:105px 8vw 70px;position:relative;background:radial-gradient(ellipse at 75% 30%,#80633236,transparent 55%),linear-gradient(145deg,#162e3a,#0b111b);border-bottom:1px solid var(--line);overflow:hidden}.chapter-banner:after{content:"✧";position:absolute;right:9%;top:-100px;font:400 500px 'Cormorant Garamond';color:#caac6420;pointer-events:none}.chapter-banner p{max-width:730px;color:#ced4d7;font-size:17px;position:relative}.chapter-banner h1{position:relative}.page-title{font-size:clamp(56px,8vw,104px);position:relative}.prose{max-width:790px;margin:auto}.prose h2{font:500 45px/1.12 'Cormorant Garamond';color:#eed7a2;margin-top:45px}.prose p{color:#c3cbd0;font-size:17px}.world-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.world{border:1px solid var(--line);padding:35px;min-height:245px;background:radial-gradient(circle at 90% 5%,#8f765329,transparent 50%),linear-gradient(130deg,#142836,#101822)}.world small{color:var(--gold);letter-spacing:.22em}.world h3{font:500 34px 'Cormorant Garamond';margin:10px 0;color:#f0e1bd}.world p{color:#b9c4c8}.muted{color:var(--muted)}.music-note{border:1px dashed #9c834f68;padding:24px;text-align:center;color:#d1c7b0;margin:30px 0}.track-row{display:grid;grid-template-columns:65px 1fr auto;align-items:center;gap:18px;border-bottom:1px solid var(--line);padding:18px 0}.track-num{color:var(--gold);font:400 34px 'Cormorant Garamond'}.track-row strong{font-weight:500}.track-row small{display:block;color:#aebbc2}.status{color:#d7bf86;font-size:11px;border:1px solid #97835566;padding:5px 9px;white-space:nowrap}.filterbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}.filterbar button{border:1px solid var(--line);background:#172432;color:#ded9cf;padding:10px 15px;cursor:pointer}.filterbar button[aria-pressed=true]{background:#aa8d58;color:#0b1119}.portrait{height:220px;background:radial-gradient(ellipse at center,#51607966,transparent 50%),linear-gradient(140deg,#203a43,#121a27);position:relative;display:grid;place-items:center}.portrait:after{content:"✧";font:140px 'Cormorant Garamond';color:#d1b77c48}.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.gallery-tile{background:linear-gradient(145deg,#152a3a,#0b141e);min-height:220px;border:1px solid var(--line);padding:24px;display:flex;align-items:end;color:#f3dfa9}.gallery-tile:nth-child(2n){background:linear-gradient(145deg,#272039,#0a1e2c)}.gallery-tile:nth-child(3n){background:linear-gradient(145deg,#383020,#111c28)}.disclaimer{padding:22px;border-left:2px solid var(--gold);background:#19273888;color:#c3c9ca}.footer-name{font:600 30px 'Cormorant Garamond';color:#ebd5a6;letter-spacing:.1em}footer{border-top:1px solid var(--line);text-align:center;padding:65px 20px;background:#080c13;color:#9ea7ad}footer p{color:#b9ac8f}.footer-links{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin:32px 0;font-size:12px}.footer-links a{color:#b1b9bd}.pill{color:var(--gold);text-transform:uppercase;letter-spacing:.19em;font-size:10px}.slim{padding-top:45px;padding-bottom:65px}.cta-strip{text-align:center;background:linear-gradient(140deg,#192b39,#141923)}.cta-strip h2{font:500 48px 'Cormorant Garamond';margin:0 0 25px}@media(max-width:1180px){.topbar nav{gap:11px}.topbar nav a{font-size:10px}.topbar{padding:0 22px}}@media(max-width:950px){.menu-toggle{display:block}.topbar nav{display:none;position:absolute;top:84px;left:0;right:0;padding:20px 25px 30px;background:#0b131bf7;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:7px}.topbar nav.open{display:flex}.topbar nav a{font-size:13px;padding:7px}.grids{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){section{padding:65px 21px}.grids,.world-grid,.gallery-grid{grid-template-columns:1fr}.hero{min-height:710px}.hero h1{font-size:clamp(54px,14vw,80px)}.hero .eyebrow{letter-spacing:.18em}.track-row{grid-template-columns:45px 1fr;gap:10px}.track-row .status{grid-column:2;width:max-content}.chapter-banner{padding:80px 22px 58px}.card .art{height:205px}.page-title{font-size:60px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

.hero-logo{display:block;width:min(92vw,900px);max-height:40vh;object-fit:contain;margin:0 auto 20px;filter:drop-shadow(0 9px 28px #000a)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.story-image{display:block;width:min(100%,790px);margin:35px auto;max-height:460px;object-fit:cover;border:1px solid #a88a5360}.wide-image{width:100%;max-height:490px;object-fit:cover;border:1px solid #a88a5360}.archive-figure{margin:0 0 45px}.archive-figure img{width:100%;height:auto;display:block;border:1px solid #a88a5360}.archive-figure figcaption{font-size:12px;color:#d1c6af;padding:12px}.portrait{background-size:cover!important;background-position:center!important}.portrait:after{display:none}.track-cover{width:62px;height:62px;object-fit:cover}.track-row:has(.track-cover){grid-template-columns:65px 62px 1fr auto}@media(max-width:640px){.track-row:has(.track-cover){grid-template-columns:45px 55px 1fr}.track-row:has(.track-cover) .status{grid-column:3}.hero-logo{max-height:30vh}}

.brand{font-size:clamp(12px,1.05vw,15px);letter-spacing:.09em}.brand small{font-size:12px;letter-spacing:.23em}@media(max-width:640px){.brand{font-size:12px}.brand small{font-size:11px}}

/* Musikarchiv – Cover und Platzhalter */
.track-row{min-height:102px;grid-template-columns:65px 76px minmax(0,1fr) auto;gap:18px}
.track-row:has(.track-cover){grid-template-columns:65px 76px minmax(0,1fr) auto}
.song-cover-link{display:block;width:76px;height:76px;overflow:hidden;border:1px solid #c9a56a7d;border-radius:3px;background:#101b29;box-shadow:0 4px 16px #0005}
.song-cover-link:hover,.song-cover-link:focus-visible{border-color:#e8c98b;outline-offset:3px}
.track-cover{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.song-cover-link:hover .track-cover{transform:scale(1.06)}
.track-placeholder{width:76px;height:76px;border:1px dashed #977c5177;background:radial-gradient(circle at center,#3c3425 0,#152331 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#b9a47b}
.track-placeholder span{font:27px Georgia,serif;line-height:1.1}
.track-placeholder small{font-size:9px;letter-spacing:.04em;color:#b9a47b}
.track-row>div:nth-child(3){min-width:0}.track-row strong{overflow-wrap:anywhere}
@media(max-width:640px){.track-row,.track-row:has(.track-cover){grid-template-columns:36px 58px minmax(0,1fr);gap:10px;padding:15px 0}.song-cover-link,.track-placeholder{width:58px;height:58px}.track-row .status,.track-row:has(.track-cover) .status{grid-column:3;justify-self:start}.track-num{font-size:28px}.track-placeholder small{font-size:8px}}
@media(prefers-reduced-motion:reduce){.track-cover{transition:none}}

/* Aethera visual direction: brass mechanics meet ancient luminous mystery */
:root{--aethera-brass:#c8a46b;--aethera-glow:#72b9b5;--aethera-violet:#8b7cba}
.hero{position:relative;isolation:isolate}
.hero:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 78% 36%,rgba(94,178,179,.17),transparent 40%),radial-gradient(ellipse at 15% 75%,rgba(192,145,83,.16),transparent 43%),linear-gradient(120deg,rgba(11,16,26,.24),rgba(36,32,53,.18))}
.hero:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.17;background:repeating-radial-gradient(circle at 85% 62%,transparent 0 37px,rgba(207,166,99,.16) 38px 39px,transparent 40px 78px);mask-image:linear-gradient(90deg,transparent 24%,black 100%)}
.chapter-banner{position:relative;isolation:isolate;background-image:radial-gradient(ellipse at 80% 25%,rgba(101,180,181,.16),transparent 47%),radial-gradient(ellipse at 15% 85%,rgba(201,156,92,.13),transparent 48%)}
.chapter-banner:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.25;background:repeating-linear-gradient(125deg,transparent 0 38px,rgba(196,157,103,.045) 39px 40px,transparent 41px 85px)}
.card,.journey-card,.roman-workshop-card{box-shadow:0 12px 40px rgba(5,10,18,.18),inset 0 1px 0 rgba(202,163,105,.07)}
.card .art{background-image:radial-gradient(circle at 72% 27%,rgba(113,202,201,.24),transparent 43%),linear-gradient(135deg,rgba(198,151,82,.13),transparent 60%)}
.section-title,.page-title{ text-shadow:0 0 32px rgba(118,174,183,.09)}
.rule{background:linear-gradient(90deg,transparent,var(--aethera-brass),var(--aethera-glow),transparent)}
@media(prefers-reduced-motion:no-preference){.card,.journey-card{transition:border-color .2s ease,transform .2s ease}.card:hover,.journey-card:hover{transform:translateY(-2px)}}

/* Bildsprache: filmisch-realistische Steampunk-Fantasy (freigegebene Motive bleiben unverändert) */
.hero{background-position:center center;background-size:cover}.hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(7,12,20,.58),rgba(7,12,20,.08) 65%),linear-gradient(0deg,rgba(7,12,20,.55),transparent 55%);z-index:0}.hero-content{position:relative;z-index:1}.story-image,.archive-figure img,.track-cover,.song-cover-link img{object-fit:cover;filter:contrast(1.07) saturate(.87);box-shadow:0 14px 38px rgba(0,0,0,.28)}.story-image,.archive-figure img{border:1px solid rgba(211,171,109,.24)}.art{background-image:linear-gradient(135deg,rgba(8,16,25,.22),rgba(7,11,19,.64));background-blend-mode:multiply}.card,.world{box-shadow:0 14px 35px rgba(0,0,0,.16)}@media(prefers-reduced-motion:reduce){.story-image,.archive-figure img,.track-cover{transition:none}}

/* Aethera: lebendige Steampunk-Animationen */
@keyframes aethera-gear-turn{to{transform:rotate(360deg)}}
@keyframes aethera-mist-drift{0%,100%{transform:translate3d(-2%,0,0);opacity:.23}50%{transform:translate3d(2%,0,0);opacity:.42}}
@keyframes aethera-glow{0%,100%{filter:drop-shadow(0 0 5px rgba(95,202,193,.26))}50%{filter:drop-shadow(0 0 17px rgba(105,214,203,.65))}}
@keyframes aethera-reveal{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}
.hero,.chapter-banner{isolation:isolate;overflow:hidden;position:relative}
.hero::after,.chapter-banner::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 65% 45%,rgba(105,201,193,.12),transparent 52%),radial-gradient(ellipse at 20% 78%,rgba(142,110,180,.12),transparent 50%);animation:aethera-mist-drift 18s ease-in-out infinite alternate}
.hero-content,.chapter-banner>*{position:relative;z-index:1}
.brand-mark{display:inline-block;animation:aethera-glow 6s ease-in-out infinite}
.journey-card,.card,.world,.expedition-stop,.orientation-card{transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.journey-card:hover,.card:hover,.world:hover,.expedition-stop:hover,.orientation-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.3);border-color:rgba(213,177,113,.65)}
.journey-card:focus-within,.card:focus-within,.expedition-stop:focus-within{border-color:#9bd6d0}
.expedition-stop[open] .expedition-detail{animation:aethera-reveal .4s ease-out both}
.chapter-mark{position:relative}
.chapter-mark::after{content:"⚙";display:inline-block;margin-left:13px;color:rgba(210,174,111,.48);font-size:1.05em;animation:aethera-gear-turn 35s linear infinite;vertical-align:middle}
.button,.spotify-track-link,.expedition-links a{transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.button:hover,.spotify-track-link:hover,.expedition-links a:hover{box-shadow:0 0 16px rgba(91,181,174,.2);transform:translateY(-2px)}
@media(max-width:680px){.chapter-mark::after{animation-duration:55s}.journey-card:hover,.card:hover,.world:hover,.expedition-stop:hover,.orientation-card:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.hero::after,.chapter-banner::after,.brand-mark,.chapter-mark::after,.expedition-stop[open] .expedition-detail{animation:none!important}.journey-card,.card,.world,.expedition-stop,.orientation-card,.button,.spotify-track-link,.expedition-links a{transition:none!important;transform:none!important}}
