@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root{--deep:#061d1b;--dark:#092e29;--gold:#f4bf63;--paper:#f7e7c6;--edge:#c99b55;--ink:#19362d;--white:#fdf6e9}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#071f1d;color:var(--white);font:15px/1.55 Inter,system-ui,sans-serif}a{color:inherit}button{font:inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.75}button:focus-visible,a:focus-visible{outline:3px solid #fbd374;outline-offset:3px}[hidden]{display:none!important}.skip{position:absolute;left:-200vw}.skip:focus{position:fixed;z-index:100;left:15px;top:15px;background:#fff;color:#222;padding:10px}
.topbar{background:#061c1a;border-bottom:1px solid #a97b3b60}.topbar-inner{max-width:1450px;min-height:70px;padding:0 25px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font:700 30px/.95 'Cormorant Garamond',serif;text-decoration:none;white-space:nowrap}.brand span{color:var(--gold)}.top-note{font-size:11px;letter-spacing:.19em;color:#e9c98a}.top-note span{margin:0 10px;color:#8eb69c}.top-link{font-size:13px;color:#eadfc5;text-decoration:none}.top-link:hover{text-decoration:underline}
main{padding:25px 25px 0}.page-heading{max-width:1000px;margin:0 auto 23px;text-align:center}.page-heading>span{display:block;color:#e9b767;font-size:10px;font-weight:800;letter-spacing:.19em}.page-heading h1{font:700 clamp(36px,4vw,59px)/1 'Cormorant Garamond',serif;color:#fff0d4;margin:8px 0}.page-heading p{font-size:14px;color:#b7d0c9;margin:0 auto;max-width:800px}
.cinema{max-width:1490px;margin:auto;border:2px solid var(--edge);border-radius:17px;overflow:hidden;box-shadow:0 25px 80px #0008;background:#062822}.cinema-nav,.cinema-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;background:#092c28;color:#e6e2c8;padding:9px 19px;min-height:45px}.location{font-size:12px;color:#f5c56c;font-weight:800}.chapter-steps{display:flex;gap:8px;align-items:center}.chapter-steps .step{display:grid;place-items:center;width:23px;height:23px;border:1px solid #8c845e;border-radius:50%;font-size:11px;color:#b7b39b}.chapter-steps .step.active{background:#f4be62;color:#072b27;border-color:#f4be62;font-weight:800}.chapter-steps small{color:#d8dcca;font-size:11px;margin-left:8px;white-space:nowrap}.tools{display:flex;gap:7px}.tools button{background:#164038;color:#fcebc7;border:1px solid #af9358;border-radius:20px;padding:5px 12px;font-size:12px}.tools button:hover{background:#235448}
.stage{width:100%;height:clamp(570px,55vw,780px);overflow:hidden;position:relative;isolation:isolate;background:#193c32}.backdrop,.scene-art,.awaken-art,.intro-video,.night-haze,.bridge-shimmer,.bridge-gleam,.film-vignette,.stage canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.scene-art,.awaken-art,.intro-video{object-fit:cover;object-position:50% 50%;transition:transform 7s cubic-bezier(.2,.7,.2,1),opacity 2.2s ease,filter 2.2s}.scene-art{transform:scale(1.035)}.stage.intro .scene-art,.stage.opening .scene-art,.stage.complete .scene-art{transform:scale(1.13)}.awaken-art{opacity:0;filter:saturate(1.12)}.stage.opening .awaken-art,.stage.complete .awaken-art{opacity:1;transform:scale(1.10)}.intro-video{opacity:0;z-index:1;transition:opacity 1s}.stage.intro .intro-video{opacity:1}.night-haze{z-index:2;background:linear-gradient(90deg,rgba(3,26,23,.64),rgba(3,26,23,.25) 44%,transparent 75%),linear-gradient(0deg,#061c1b88 0%,transparent 30%)}.stage.intro .night-haze{background:linear-gradient(90deg,#06271f80,transparent 80%)}.bridge-shimmer{z-index:3;opacity:0;background:radial-gradient(ellipse at 69% 46%,rgba(255,228,128,.68),rgba(255,195,76,.21) 12%,transparent 30%);mix-blend-mode:screen;transition:opacity 3s}.stage.opening .bridge-shimmer,.stage.complete .bridge-shimmer{opacity:1;animation:bridgePulse 2.6s ease-in-out infinite alternate}.bridge-gleam{z-index:3;opacity:0;background:linear-gradient(118deg,transparent 45%,#fff5d4aa 49%,transparent 53%) 68% 47%/25% 17% no-repeat;filter:blur(7px);transform:translateX(-18%) rotate(-3deg)}.stage.opening .bridge-gleam,.stage.complete .bridge-gleam{opacity:1;animation:gleam 4.8s ease-out forwards}.film-vignette{z-index:4;background:linear-gradient(180deg,#0005,transparent 28%,transparent 71%,#0008),linear-gradient(90deg,#001c1680,transparent 65%)}.stage canvas{z-index:5}
@keyframes bridgePulse{from{filter:brightness(.9)}to{filter:brightness(1.45)}}@keyframes gleam{0%{transform:translateX(-18%) rotate(-3deg);opacity:0}18%{opacity:.9}80%{opacity:.8}100%{transform:translateX(48%) rotate(-3deg);opacity:0}}.scene-top{position:absolute;top:16px;left:21px;right:21px;display:flex;align-items:center;justify-content:space-between;z-index:20;pointer-events:none}.scene-top>span{letter-spacing:.13em;font-size:10px;color:#fff1c6;text-shadow:0 2px 8px #001b19}.scene-top button{pointer-events:auto;border:1px solid #f9d395;border-radius:40px;background:#092a27b9;color:#fff2d4;padding:9px 15px;font-size:12px}
.center-overlay{position:absolute;inset:0;z-index:15;display:grid;place-items:center;padding:16px;background:#03191377;backdrop-filter:blur(2px)}.start-card{max-width:650px;width:min(100%,650px);padding:32px 38px 29px;text-align:center;background:linear-gradient(145deg,#0d3e36f3,#062821f7);border:2px solid #c59d56;border-radius:22px;box-shadow:0 18px 55px #0008, inset 0 0 30px #f3b84612}.ornament{display:block;color:#e7bb72;letter-spacing:.4em;margin-bottom:9px}.start-card h2{font:700 clamp(40px,4.8vw,62px)/1 'Cormorant Garamond',serif;color:#fff0d5;margin:7px 0 16px}.start-card p{font-size:16px;color:#e6e2cb;max-width:540px;margin:0 auto 23px}.start-card small{display:block;color:#b4caba;margin:13px auto 0;font-size:11px}.gold-btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:100px;padding:14px 26px;background:linear-gradient(#ffdb8e,#f0ae48);color:#092a26;text-decoration:none;font-weight:800;box-shadow:0 8px 24px #0005;min-height:48px}.gold-btn:hover{filter:brightness(1.09)}
.dialog-panel{position:absolute;left:clamp(22px,3.2vw,52px);top:18%;bottom:auto;width:min(530px,50%);z-index:12;border:2px solid #b88f51;border-radius:17px;background:linear-gradient(#fdf0d7f5,#f1dbb6f5);color:var(--ink);box-shadow:0 18px 60px #000a;overflow:visible;padding:31px 29px 21px}.dialog-title{position:absolute;top:-19px;left:15%;right:15%;height:36px;display:flex;align-items:center;justify-content:center;gap:14px;background:linear-gradient(#19483d,#082c27);color:#ffeed2;border:1px solid #c79e63;border-radius:12px;font:700 22px 'Cormorant Garamond',serif;box-shadow:0 3px 8px #0015}.dialog-title span{letter-spacing:.03em}.dialog-panel>p{font-size:14px;line-height:1.55}.dialog-panel .question-header{margin:17px 0 5px;display:flex;justify-content:space-between;color:#9c6a32;font-size:10px;letter-spacing:.16em;font-weight:800}.dialog-panel h2{margin:5px 0 14px;font:700 clamp(27px,2.4vw,39px)/1.04 'Cormorant Garamond',serif;color:#123b32}.choices{display:grid;gap:9px}.choice{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;gap:12px;background:linear-gradient(#155045,#082f2a);border:1px solid #b68b50;border-radius:13px;color:#fff3d8;padding:12px 17px;font-size:15px;font-weight:700;transition:transform .16s,background .15s}.choice:hover:not(:disabled){transform:translateX(4px);background:#236153}.choice .number{display:grid;place-items:center;width:23px;height:23px;border-radius:6px;background:#ffe0a5;color:#13372d;font-size:12px}.choice.right{background:#276c47;border-color:#baf0a0}.choice.wrong{background:#693f35;border-color:#d59b85}.secondary-btn{background:transparent;border:1px solid #ba8d57;border-radius:40px;padding:8px 14px;color:#1d5044;font-size:12px;font-weight:700}.dialog-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:39px;margin-top:12px}.minor-btn{border:0;background:transparent;color:#805222;font-size:12px;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}.dialog-bottom p{font-size:12px;line-height:1.3;margin:0;color:#315343;text-align:right}.reveal{position:absolute;inset:0;z-index:14;display:grid;place-items:end center;padding-bottom:75px;pointer-events:none}.reveal-card{background:#072a25d9;color:#fff2d8;text-align:center;border:1px solid #edc278;border-radius:15px;max-width:500px;padding:13px 30px;box-shadow:0 12px 40px #0005}.reveal-card h2{font:700 42px/1 'Cormorant Garamond',serif;margin:3px 0}.reveal-card p{font-size:12px;margin:0 0 5px;color:#e6ddc6}.finish{background:#06271d4a}.finish .start-card{max-width:690px}.learned{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;color:#f8e2ae}.learned span{border:1px solid #b69a64;background:#0b392f;border-radius:10px;padding:8px 13px}.finish-actions{display:flex;justify-content:center;gap:11px;flex-wrap:wrap;margin-top:22px}.secondary-link{padding:13px 22px;text-decoration:none;border:1px solid #d0a75f;border-radius:30px;color:#fff0d1}.cinema-footer p{margin:0;font-size:11px;color:#d1e2d8}.cinema-footer>span{font-size:10px;color:#eed092;white-space:nowrap}.help{max-width:1490px;margin:17px auto 0;display:flex;justify-content:space-between;gap:22px;color:#93b4ac;font-size:11px}.help p{margin:0}.help kbd{border:1px solid #789e93;border-radius:3px;padding:1px 5px}footer{text-align:center;font-size:11px;color:#789c93;padding:32px 12px 23px}
/* Kapitelübersicht */.hub{max-width:1420px;margin:auto;min-height:76vh}.hub-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:25px auto 30px;max-width:1200px}.hub-grid article{background:#0c302b;border:1px solid #aa8b53;overflow:hidden;border-radius:18px;box-shadow:0 14px 32px #0005}.hub-grid img{width:100%;height:250px;object-fit:cover;display:block}.hub-body{padding:20px 27px 29px}.hub-body>span{font-size:10px;letter-spacing:.14em;color:var(--gold)}.hub-body h2{font:700 37px 'Cormorant Garamond',serif;margin:4px 0 5px}.hub-body p{color:#d5e0d5;font-size:14px;max-width:540px;min-height:45px}.hub-body .gold-btn{margin-top:13px}.hub-note{font-size:12px;color:#a7c2b5;text-align:center}
@media(max-width:900px){.dialog-panel{top:17%;left:20px;width:min(530px,60%);padding:28px 20px 18px}.stage{height:650px}.chapter-steps small{display:none}.top-note{display:none}.hub-grid{grid-template-columns:1fr}.hub-grid img{height:210px}}
@media(max-width:650px){main{padding:19px 9px 0}.topbar-inner{min-height:58px;padding:0 14px}.brand{font-size:23px}.top-link{font-size:11px}.page-heading{padding:0 6px}.page-heading h1{font-size:40px}.page-heading p{font-size:12px}.cinema{border-radius:10px}.cinema-nav{padding:8px 8px;min-height:43px}.location{font-size:10px}.chapter-steps{gap:5px}.chapter-steps .step{width:20px;height:20px}.tools button{font-size:11px;padding:5px 8px}.tools button span{display:none}.stage{height:min(780px,calc(100dvh - 135px));min-height:660px}.scene-art,.awaken-art,.intro-video{object-position:67% 39%}.night-haze{background:linear-gradient(0deg,#051d19cb,transparent 72%)}.dialog-panel{top:auto;bottom:14px;left:10px;right:10px;width:auto;padding:27px 17px 16px}.dialog-title{font-size:18px;height:32px;top:-17px}.dialog-panel>p{font-size:12px}.dialog-panel h2{font-size:29px}.choice{padding:10px 12px}.dialog-bottom{margin-top:6px}.scene-top{top:9px;left:12px;right:12px}.scene-top span{font-size:9px}.center-overlay{padding:8px}.start-card{padding:26px 17px}.start-card h2{font-size:44px}.start-card p{font-size:14px}.reveal{padding:0 10px 30px}.reveal-card h2{font-size:33px}.cinema-footer{min-height:35px;padding:8px}.cinema-footer>span{font-size:9px}.help{display:block;font-size:11px;padding:0 8px}.help p{margin-bottom:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}