:root{color-scheme:dark;--gold:#ffd078;--text:#fff0d9;--muted:#d3bfa7;--line:#bd773b70}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#100a07;color:var(--text);font-family:Arial,Helvetica,sans-serif}
body{overflow:hidden}
a{color:var(--gold);text-underline-offset:4px}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #ffe0a0;outline-offset:5px}
.skip-link{position:fixed;top:8px;left:12px;z-index:20;padding:12px;background:#201107;transform:translateY(-150%)}
.skip-link:focus{transform:none}
.scene{position:fixed;inset:-10px;pointer-events:none;transform:translate(var(--scene-x,0),var(--scene-y,0));transition:transform .8s ease}
.scene-view{position:absolute;inset:0;background-position:center;background-size:cover;opacity:0;transition:opacity .65s ease}
.scene-view.is-active{opacity:1}
.scene-start{background-image:url('/assets/festung-start-20261018-v4.webp')}
.scene-geschichte{background-image:url('/assets/festung-geschichte-20261018-v4.webp')}
.scene-fakten{background-image:url('/assets/festung-fakten-20261018-v4.webp')}
.scene-besitzer{background-image:url('/assets/festung-besitzer-20261018-v4.webp')}
.scene-impressum{background-image:url('/assets/festung-impressum-20261018-v4.webp')}
.scene::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#100904b8 0%,#10090440 43%,transparent 75%),linear-gradient(0deg,#08050380,transparent 35%)}
.game-shell{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100vh;height:100dvh}
.menu-nav{display:flex;gap:5px;width:max-content;max-width:calc(100% - 64px);margin:24px 32px 0;padding:6px;background:#130b07ee;border:1px solid var(--line);border-top:2px solid #eaa148;box-shadow:0 5px 25px #0007}
.menu-nav a{display:block;padding:14px 20px;color:#f3d8b7;text-decoration:none;font-weight:bold;font-size:14px;transition:background .2s,color .2s}
.menu-nav a:hover{background:#613417;color:#fff}
.menu-nav a[aria-current]{background:linear-gradient(110deg,#d4761e,#8e3c13);color:#fff7e6;box-shadow:inset 3px 0 #ffe3a4}
.menu-viewport{display:flex;min-height:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;outline:none}
.menu-viewport::-webkit-scrollbar{display:none}
.menu-panel{flex:0 0 100%;width:100%;min-width:0;min-height:0;overflow:auto;scroll-snap-align:start;scroll-snap-stop:always;scrollbar-color:#ac6e32 #160e08;scrollbar-width:thin;padding:30px 32px;overscroll-behavior-y:contain}
.panel-content{width:min(780px,65%);padding:26px;background:#100b08f2;border:1px solid var(--line);border-left:3px solid #ba7132;box-shadow:0 15px 50px #0007}
.start-panel{display:flex;align-items:center}
.start-panel .panel-content{width:min(610px,52%);padding:28px;background:linear-gradient(110deg,#100a06f5,#100a06e8);border-left:3px solid #e49b46}
.overline{margin:0 0 12px;color:#efb963;font-size:11px;font-weight:bold;letter-spacing:.15em;text-transform:uppercase}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(38px,4.4vw,66px);line-height:1;letter-spacing:-.04em;color:#ffad3b;text-shadow:0 3px #5a2107,0 0 30px #ff7b1130;margin-bottom:12px}
.tagline{font-size:clamp(14px,1.3vw,19px);font-weight:bold;margin-bottom:12px}
.intro{color:var(--muted);font-size:15px;line-height:1.6;margin-bottom:24px}
.quick-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.game-option{display:flex;align-items:center;gap:12px;padding:15px 12px;min-width:0;color:var(--text);background:linear-gradient(110deg,#3c2414,#20130b);border:1px solid #b873327d;text-decoration:none;transition:transform .2s,background .2s,border-color .2s;position:relative}
.game-option:hover{transform:translateX(3px);background:#603014;border-color:#ffb44d;box-shadow:0 0 20px #ff861c20}
.game-option img{object-fit:contain;width:30px;height:30px;flex-shrink:0}
.game-option strong{display:block;font-size:16px}
.game-option small{display:block;color:#e2cdb2;font-size:11px;line-height:1.45;margin-top:5px}
.game-option>b{margin-left:auto;color:#f4ad4e}
.brand-motto{font-size:10px;letter-spacing:.1em;color:#eabf7e;margin:24px 0 10px}
.powered{font-size:11px;color:var(--muted);margin:0}
.category-header h2{font-size:32px;margin-bottom:16px;color:#ffcf80}
.category-header .intro{margin-bottom:20px}
.section{margin:24px 0}
.section-title{font-size:17px;color:#efb963;margin-bottom:14px}
.card{padding:20px;border:1px solid #a4723c55;background:#20160fe8;min-width:0}
.card h3{font-size:18px;color:#ffe0aa;line-height:1.35;margin-bottom:10px}
.card p,.faction-list,.mad-facts{font-size:14px;line-height:1.75;color:#f0e3d2}
.card p:last-child{margin-bottom:0}
.timeline{display:grid;gap:12px}
.timeline-item{display:grid;grid-template-columns:52px 1fr;gap:18px}
.year{color:#ffb449;font-size:22px;font-weight:bold}
.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.owner-top{display:flex;justify-content:space-between;align-items:start;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.owner-top h3{margin-bottom:0}
.badge{font-size:10px;color:#ffce7a;background:#4e301a;border:1px solid #8e5e29;padding:5px 8px}
.chaos-ring{display:none}
.fact-chip{padding:9px 0;border-bottom:1px solid #a4723c40}
.fact-chip:last-child{border:0}
.faction-list{padding-left:20px;margin:0}
.faction-list li{padding:7px 0}
.legal-card h2{font-size:19px;color:#ffd089;margin:26px 0 10px}
.legal-card p{overflow-wrap:anywhere}
.legal-hint{color:#d6c0a5!important;font-size:12px!important}
.text-link{font-size:12px;display:inline-block;margin-top:5px;line-height:1.6}
footer{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:8px 32px;background:#100904ee;border-top:1px solid #9d652b88;color:var(--gold);font-size:11px}
.footer-left{display:flex;align-items:center;gap:18px;min-width:0;flex-wrap:wrap}
.footer-sec-lock{opacity:.06;text-decoration:none;font-size:9px;display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px}
.footer-sec-lock:hover,.footer-sec-lock:focus-visible{opacity:1}
.motion-toggle{border:0;border-bottom:1px solid #9b713866;background:transparent;padding:4px 0;color:var(--gold);font-size:10px;cursor:pointer}
.motion-toggle:disabled{cursor:default}
#clock{margin-left:auto;flex:0 0 auto;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.05em;color:var(--gold)}
.fortress-embers{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.fortress-embers i{position:absolute;bottom:-20px;left:60%;width:3px;height:3px;background:#ffb34c;box-shadow:0 0 7px #ff7000;opacity:0;animation:ember-rise 13s linear infinite}
.fortress-embers i:nth-child(2){left:78%;animation-delay:-3s}
.fortress-embers i:nth-child(3){left:90%;animation-delay:-6s}
.fortress-embers i:nth-child(4){left:45%;animation-delay:-9s}
.fortress-embers i:nth-child(5){left:67%;animation-delay:-11s}
.fortress-embers i:nth-child(6){left:85%;animation-delay:-5s}
.sound-bars{display:flex;align-items:center;justify-content:center;gap:3px;width:30px;height:30px;flex-shrink:0}
.sound-bars i{width:4px;height:20px;background:#ffab43;animation:sound-bar 1.3s ease-in-out infinite alternate}
.sound-bars i:nth-child(2){height:29px;animation-delay:-.3s}.sound-bars i:nth-child(3){height:14px;animation-delay:-.7s}.sound-bars i:nth-child(4){height:25px;animation-delay:-1s}
@keyframes ember-rise{0%{transform:translate(0,0);opacity:0}15%{opacity:.6}80%{opacity:.35}100%{transform:translate(-70px,-85vh);opacity:0}}
@keyframes sound-bar{to{transform:scaleY(.4)}}
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.motion-paused .scene{transform:none}
@media(max-width:1000px){.menu-nav{margin:16px 20px 0;max-width:calc(100% - 40px)}.menu-nav a{padding:12px 16px}.menu-panel{padding:24px 20px}.panel-content{width:75%}.start-panel .panel-content{width:62%}footer{padding:8px 20px}.grid.two{grid-template-columns:1fr}}
@media(max-width:650px){.menu-nav{margin:12px 12px 0;max-width:calc(100% - 24px);width:calc(100% - 24px);padding:4px;gap:2px;flex-wrap:wrap}.menu-nav a{flex:1 0 auto;text-align:center;font-size:12px;padding:10px 9px}.menu-panel{padding:18px 12px}.panel-content,.start-panel .panel-content{width:100%;padding:20px}.start-panel{align-items:safe center}.scene-view{background-position:65% center}.scene::after{background:#08050360}.quick-list{gap:8px}.game-option{padding:12px 10px;gap:8px}.game-option img,.sound-bars{width:24px;height:24px}.game-option strong{font-size:14px}.game-option small{font-size:10px}.game-option>b{display:none}.brand-motto{font-size:9px;letter-spacing:.05em}footer{padding:8px 12px;font-size:10px}.footer-left{gap:8px;max-width:calc(100% - 75px)}.motion-toggle{font-size:9px}.timeline-item{grid-template-columns:1fr;gap:8px}.card{padding:16px}.category-header h2{font-size:28px}}
@media(max-height:620px){.start-panel{align-items:safe center}.menu-nav{margin-top:10px}.menu-panel{padding-top:18px;padding-bottom:18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.scene{transform:none}}



.menu-panel.is-active .panel-content{animation:room-enter .35s ease-out}
@keyframes room-enter{from{opacity:.3;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:650px){.menu-nav{flex-wrap:nowrap}.menu-nav a{flex:1 1 auto;padding:10px 6px}}
@media(max-width:360px){.menu-nav a{font-size:11px;padding:10px 5px}}



/* The transparent doorway follows the same image geometry and parallax as the background. */
.door-map{position:fixed;inset:-10px;z-index:1;pointer-events:none;transform:translate(var(--scene-x,0),var(--scene-y,0));transition:transform .8s ease}
.door-map svg{width:100%;height:100%;display:block;overflow:hidden}
.castle-door{pointer-events:all;cursor:pointer;outline:none}
.castle-door path{fill:transparent;stroke:transparent;stroke-width:3;transition:fill .2s,stroke .2s}
.castle-door:hover path,.castle-door:focus-visible path{fill:#ffc56218;stroke:#ffd078;filter:drop-shadow(0 0 8px #ff8c32)}
body:not([data-menu="start"]) .door-map,body:has(.menu-panel:target:not(#start)) .door-map{display:none}
.start-panel .panel-content{position:relative;z-index:2}
.menu-nav,footer{position:relative;z-index:3}
.motion-paused .door-map{transform:none}
@media(max-width:650px),(max-aspect-ratio:1/1){
 .scene-start{background-size:auto 400px;background-position:right top 70px;background-repeat:no-repeat;background-color:#100a07}
 .door-map svg{position:absolute;right:0;top:70px;height:400px;width:710.733px}
 .start-panel{display:block;padding-top:320px}
 .start-panel .panel-content{width:min(610px,100%)}
}
@media(prefers-reduced-motion:reduce){.door-map{transform:none}}