@font-face{font-family:OfficeSerif;src:url('fonts/CormorantGaramond-Variable.ttf') format('truetype');font-display:swap}
@font-face{font-family:Hand;src:url('fonts/Caveat-Variable.ttf') format('truetype');font-display:swap}
:root{color-scheme:dark;--ink:#eee5d2;--muted:#b9ae98;--paper:#e8d8b6;--paper-ink:#25251f;--wood:#35291e;--night:#171814;--panel:#23251f;--line:#75684f;--accent:#d6ad59;--good:#50b96b;--warn:#e39a42;--danger:#c95b52;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--night);color:var(--ink)}body{min-height:100dvh;background:radial-gradient(circle at 20% 0,#383729 0,transparent 36rem),linear-gradient(#20211c,#11120f);overscroll-behavior:none}button,input,textarea,select{font:inherit}button,a{touch-action:manipulation}.skip-link{position:fixed;left:1rem;top:-4rem;z-index:999;background:#fff;color:#000;padding:.7rem}.skip-link:focus{top:1rem}:focus-visible{outline:3px solid #ffd77d;outline-offset:3px}.app{min-height:100dvh}.boot-screen,.auth-screen{min-height:100dvh;display:grid;place-content:center;justify-items:center;padding:2rem;text-align:center}.boot-screen img,.auth-logo{filter:drop-shadow(0 10px 18px #0008)}.auth-card{width:min(30rem,100%);padding:clamp(1.3rem,4vw,2.2rem);border:1px solid #8b7958;border-radius:8px;background:linear-gradient(145deg,#eee0bd,#cdb88e);color:var(--paper-ink);box-shadow:0 24px 70px #000b}.auth-card h1{font:700 clamp(2rem,7vw,3.2rem)/.9 OfficeSerif;margin:.8rem 0}.auth-card label{display:block;text-align:left;font-weight:700;margin:.9rem 0 .35rem}.field{width:100%;border:1px solid #706044;border-radius:4px;padding:.8rem;background:#fffdf5;color:#161711}.pin-field{font-size:2rem;letter-spacing:.55em;text-align:center;font-variant-numeric:tabular-nums}.primary,.secondary,.icon-button{border:1px solid #8e7442;border-radius:4px;cursor:pointer}.primary{width:100%;margin-top:1.2rem;padding:.85rem 1rem;background:#34352d;color:#fff7df;font-weight:800}.secondary{padding:.65rem .85rem;background:#e5d2a8;color:#24251f}.primary:disabled,.secondary:disabled{opacity:.55;cursor:wait}.error{color:#8c201b;font-weight:700}.muted{color:var(--muted)}.auth-card .muted{color:#5f5747}.shell{min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto}.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:.8rem;min-height:64px;padding:calc(.55rem + var(--safe-top)) clamp(.75rem,3vw,2rem) .55rem;background:#171814ed;border-bottom:1px solid #6c624c;backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:.65rem;color:var(--ink);text-decoration:none;font:700 1.25rem OfficeSerif}.brand img{width:38px;height:38px}.topbar-title{flex:1;min-width:0;font:700 1.45rem OfficeSerif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-actions{display:flex;gap:.4rem}.icon-button{display:grid;place-content:center;min-width:42px;min-height:42px;background:#2d2e27;color:var(--ink)}.content{width:min(1200px,100%);margin:auto;padding:clamp(1rem,3vw,2rem);padding-bottom:calc(6rem + var(--safe-bottom))}.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(14rem,32rem);gap:clamp(1.2rem,5vw,4rem);align-items:center;min-height:55vh}.hero h1,.section-title{font:700 clamp(2.2rem,6vw,4.6rem)/.9 OfficeSerif;margin:.2em 0}.hero-art{width:100%;max-height:60vh;object-fit:cover;border:10px solid #ddd0ad;transform:rotate(1.5deg);box-shadow:0 20px 50px #000b}.case-grid,.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1rem}.case-card,.panel,.evidence-card,.suspect-card{background:linear-gradient(150deg,#2b2d26,#1d1f1a);border:1px solid #675e49;border-radius:8px;overflow:hidden;box-shadow:0 10px 26px #0005}.case-card{cursor:pointer;text-align:left;color:inherit;padding:0}.case-card img{width:100%;aspect-ratio:4/3;object-fit:cover}.case-card-body,.panel{padding:1rem}.case-card h2,.panel h2{font:700 1.7rem OfficeSerif;margin:.1rem 0}.badge{display:inline-block;padding:.2rem .45rem;border:1px solid currentColor;border-radius:99px;font-size:.75rem;color:#d8c28f}.download-progress{width:100%}.game-layout{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:1.3rem;align-items:start}.side-nav{position:sticky;top:82px;display:grid;gap:.4rem}.nav-button,.bottom-nav a{color:var(--muted);text-decoration:none;border:0;background:transparent;cursor:pointer}.nav-button{padding:.72rem .8rem;text-align:left;border-left:3px solid transparent}.nav-button.active{color:#fff1c9;border-color:var(--accent);background:#ffffff0b}.bottom-nav{position:fixed;z-index:40;bottom:0;left:0;right:0;display:none;grid-auto-flow:column;grid-auto-columns:1fr;padding:.3rem .35rem calc(.3rem + var(--safe-bottom));background:#171814f5;border-top:1px solid #6c624c;backdrop-filter:blur(12px)}.bottom-nav a{display:grid;place-items:center;gap:.15rem;min-height:54px;font-size:.7rem}.bottom-nav a span{font-size:1.25rem}.bottom-nav a.active{color:#ffe5a4}.paper{background:linear-gradient(#eadcbb,#d7c49d);color:var(--paper-ink);border:1px solid #8a7754;box-shadow:0 16px 35px #0007;padding:clamp(1.1rem,4vw,2.5rem);font-family:OfficeSerif;font-size:1.2rem}.media-asset{display:block;max-width:100%;max-height:70vh;margin:auto;object-fit:contain}.media-player{width:100%}.evidence-card,.suspect-card{display:grid;grid-template-columns:5.5rem 1fr;gap:.8rem;padding:.65rem;text-decoration:none;color:inherit}.evidence-card img,.suspect-card img{width:5.5rem;height:5.5rem;object-fit:cover;background:#0c0d0b}.unread{border-color:var(--accent)}.detail-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(15rem,.6fr);gap:1.2rem}.toolbar{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0}.notebook{width:100%;min-height:55vh;padding:1.5rem;background:#f1e5c5;color:#29251d;font:1.35rem/1.45 Hand;border:0;box-shadow:0 12px 30px #0008}.map{position:relative;max-width:900px;margin:auto}.map>img{display:block;width:100%}.map-marker{position:absolute;transform:translate(-50%,-50%);min-width:2.2rem;min-height:2.2rem;border-radius:50%;border:2px solid #f3d17f;background:#272820;color:#fff;cursor:pointer}.modal-backdrop{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1rem;background:#000b}.modal{width:min(42rem,100%);max-height:90dvh;overflow:auto;background:#25261f;border:1px solid #9b8354;border-radius:8px;padding:1.2rem}.fingerprint-module{display:grid;grid-template-rows:auto minmax(18rem,1fr) auto;gap:.7rem;height:min(72vh,48rem)}.finger-strip{display:flex;gap:.5rem;overflow-x:auto;padding:.25rem}.finger-card{flex:0 0 7rem;background:#111;border:2px solid #ffffff24;color:#eee;padding:.25rem;cursor:pointer}.finger-card img{width:100%;height:4.5rem;object-fit:contain}.finger-card.linked{border-color:var(--warn)}.finger-card.active{border-color:var(--good)}.light-table{position:relative;overflow:hidden;touch-action:none;border:2px solid #b8a474;border-radius:12px;background:radial-gradient(circle,#f7faef,#d9e4d6 65%,#7b8a84)}.finger-layer{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain;user-select:none;-webkit-user-drag:none}.finger-found{opacity:.48;cursor:grab}.finger-found:active{cursor:grabbing}.rotate-handle{display:none;position:absolute;right:1rem;top:1rem;width:2.8rem;height:2.8rem;border-radius:50%;border:2px solid #263;color:#263;background:#fff9;cursor:grab}.light-table:hover .rotate-handle,.finger-found:focus-visible~.rotate-handle{display:block}.match-flash{animation:match-flash .9s ease-out}.qr-preview{width:min(100%,38rem);background:#000;aspect-ratio:4/3}.status-dot{width:.65rem;height:.65rem;border-radius:50%;display:inline-block;background:var(--warn)}.status-dot.online{background:var(--good)}.toast-region{position:fixed;z-index:120;top:calc(1rem + var(--safe-top));right:1rem;display:grid;gap:.5rem}.toast{max-width:24rem;padding:.8rem 1rem;border:1px solid #9b8354;background:#25261f;color:#fff;border-radius:5px;box-shadow:0 8px 24px #0008}.update-banner{position:fixed;z-index:60;left:1rem;right:1rem;bottom:calc(5rem + var(--safe-bottom));margin:auto;width:min(38rem,calc(100% - 2rem));padding:1rem;background:#302d23;border:1px solid var(--accent);border-radius:6px}.hidden{display:none!important}@keyframes match-flash{0%{box-shadow:inset 0 0 0 100vmax #42c96b66}100%{box-shadow:inset 0 0 0 100vmax transparent}}
@media(max-width:760px){.topbar{min-height:58px}.brand strong{display:none}.content{padding:.85rem .8rem 6rem}.game-layout{display:block}.side-nav{display:none}.bottom-nav{display:grid}.hero{grid-template-columns:1fr;min-height:auto}.hero-art{order:-1;max-height:34vh}.detail-grid{grid-template-columns:1fr}.section-title{font-size:2.5rem}.top-actions .desktop-only{display:none}}
@media(orientation:landscape) and (max-height:500px){.topbar{position:relative;padding-top:.4rem}.content{padding-bottom:4.5rem}.bottom-nav{grid-auto-flow:row;grid-template-columns:repeat(6,1fr)}.bottom-nav a{min-height:42px}.fingerprint-module{height:calc(100dvh - 7.5rem);grid-template-columns:9rem 1fr 9rem;grid-template-rows:1fr}.finger-strip{flex-direction:column}.finger-card{flex:0 0 5.5rem}}
@media(min-width:1400px){.content{width:min(1500px,100%)}.case-grid{grid-template-columns:repeat(4,1fr)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media(hover:none){.rotate-handle{display:none!important}}
.finger-card.selected{border-color:var(--accent)}

/* Browser-Layout auf Basis der gelieferten App-Grafiken. */
body{background:#100e0b url('images/asset_bg_texture.png') center top/cover fixed}
.auth-screen{overflow:auto;background:#090806 url('images/login_bg.jpg') center/cover fixed}
.auth-card{width:min(47rem,calc(100vw - 2rem));min-height:40.7rem;padding:10.7rem clamp(4rem,8vw,6rem) 3.2rem;border:0;border-radius:0;background:url('images/modal_bg.png') center/100% 100% no-repeat;color:var(--paper-ink);box-shadow:0 24px 70px #000c;filter:none}
.auth-form{width:100%;max-width:36rem;margin:auto}
.auth-card h1{font-size:clamp(2.15rem,5vw,3.5rem);margin:.2rem 0 .35rem}
.auth-card label{margin:.7rem 0 .3rem}
.auth-kicker{margin:0;color:#74501e;font-size:.72rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.auth-lead{margin:.15rem 0 .7rem;color:#4b4438}
.auth-card .field{border-color:#806b48;border-radius:7px;padding:.72rem .85rem;background:#fffaf0e8;box-shadow:inset 0 2px 7px #6b512629}
.auth-card .field:focus{border-color:#d2a84e;box-shadow:0 0 0 3px #e9bc5266,inset 0 2px 7px #6b512629}
.field-help{margin:.2rem 0 0;text-align:left;color:#685d4c;font-size:.78rem}
.pin-fieldset{border:0;margin:.65rem 0 0;padding:0}
.pin-fieldset legend{width:100%;margin-bottom:.4rem;text-align:left;font-weight:800}
.pin-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(.35rem,1.8vw,.7rem)}
.pin-cell{width:100%;aspect-ratio:1;border:1px solid #806b48;border-radius:8px;background:#fffaf0e8;color:#241d13;text-align:center;font:800 clamp(1.4rem,5vw,2rem) OfficeSerif;font-variant-numeric:tabular-nums;box-shadow:inset 0 2px 7px #6b512629}
.pin-cell:focus{border-color:#bd8320;box-shadow:0 0 0 3px #e9bc5266;outline:0}
.auth-card .primary{min-height:3.6rem;margin-top:1rem;padding:.85rem 1.2rem;border:0;background:url('images/login_button.png') center/100% 100% no-repeat;color:#e8c77f;font-family:OfficeSerif;font-size:1.12rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 1px #000}
.auth-switch{margin:.7rem auto 0;border:0;background:transparent;color:#5e451e;font-size:.88rem;font-weight:800;text-decoration:underline;cursor:pointer}
.auth-hint{margin:.7rem 0 0;color:#655c4d;font-size:.84rem}
.auth-card .error{min-height:1.15em;margin:.5rem 0 0}
.topbar{background:#17120ded url('images/asset_bg_texture.png') center/cover;border-bottom-color:#8d6a2c;box-shadow:0 8px 24px #0008}
.office-home{min-height:calc(100dvh - 9rem);margin:calc(clamp(1rem,3vw,2rem)*-1);padding:clamp(1.3rem,4vw,3.5rem);display:grid;align-content:space-between;background:linear-gradient(90deg,#07060526,#070605b8),url('images/hub_office_room_extended.jpg') center/cover;border:1px solid #765522;box-shadow:inset 0 0 5rem #000b}
.office-heading{max-width:42rem;text-shadow:0 2px 8px #000}
.office-heading h1{font:700 clamp(2.8rem,6vw,5.4rem)/.85 OfficeSerif;margin:.15em 0}
.office-heading p:not(.badge){font-size:1.08rem;color:#d7c6a5}
.office-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.7rem,2vw,1.2rem);width:min(70rem,100%);margin:clamp(2rem,12vh,8rem) auto 0}
.office-links a{min-height:9rem;display:grid;grid-template-columns:5.5rem 1fr;grid-template-rows:1fr 1fr;align-items:end;column-gap:1rem;padding:1rem;color:#f2dfb7;text-decoration:none;background:linear-gradient(145deg,#2a1c12e8,#0e0b09f2);border:1px solid #a57a32;border-radius:10px;box-shadow:0 12px 28px #000a,inset 0 0 20px #9c6e2318}
.office-links img{grid-row:1/3;width:5.5rem;height:5.5rem;object-fit:contain;align-self:center}
.office-links strong{font:700 1.65rem OfficeSerif}.office-links span{align-self:start;color:#aa9675;font-size:.86rem}
.hero{min-height:27rem;padding:clamp(1.4rem,4vw,3rem);background:linear-gradient(90deg,#0c0906f0,#0c090676),url('images/faelle_bg.jpg') center/cover;border:1px solid #755526;border-radius:12px;box-shadow:0 16px 40px #0008}
.hero-art{display:none}.case-card{background:#21160f url('images/neue_faelle_item_bg.png') center/100% 100%}
.panel,.evidence-card,.suspect-card{background:#201712 url('images/fall_item_bg.png') center/100% 100%}
.paper{background:#ead39d url('images/briefing_backgound.png') center/100% 100% no-repeat;padding:clamp(2rem,6vw,5rem);border:0;filter:drop-shadow(0 12px 22px #0009)}
.bottom-nav{background:#17100d url('images/asset_bottom_bar.png') center/100% 100% no-repeat;border-top:0;padding:.45rem .5rem calc(.5rem + var(--safe-bottom))}
.bottom-nav a img{width:2.1rem;height:2.1rem;object-fit:contain}.bottom-nav a.active{border:1px solid #d0a64c;border-radius:10px;background:#50311b99}

@media(max-width:760px){
  .auth-screen{padding:.5rem;align-content:start}.auth-card{width:100%;min-height:calc(100dvh - 1rem);padding:13.2rem clamp(2rem,10vw,4rem) 3.2rem;background-size:100% 100%}
  .auth-card h1{font-size:clamp(2rem,10vw,3rem)}.auth-lead{font-size:.9rem}.auth-card label{font-size:.9rem}.auth-card .field{padding:.65rem .75rem}.auth-card .primary{font-size:.94rem;letter-spacing:.025em}
  .office-home{min-height:calc(100dvh - 7rem)}.office-links{grid-template-columns:1fr;margin-top:3rem}.office-links a{min-height:6.5rem}
}
@media(orientation:landscape) and (max-height:600px){
  .auth-screen{display:block;padding:.4rem}.auth-card{width:min(40rem,calc(100vw - .8rem));min-height:37rem;margin:auto;padding:10rem 4.8rem 2.7rem}.auth-card h1{font-size:2.2rem}.auth-lead{margin-bottom:.35rem}.auth-card label{margin:.4rem 0 .2rem}.auth-card .field{padding:.55rem .7rem}.auth-card .primary{min-height:3rem;margin-top:.65rem}.auth-switch{margin-top:.35rem}
  .office-home{min-height:calc(100dvh - 4rem);grid-template-columns:minmax(16rem,.7fr) minmax(0,1.3fr);align-items:end;gap:1rem}.office-links{margin:0;grid-template-columns:repeat(3,1fr)}.office-links a{grid-template-columns:1fr;grid-template-rows:auto auto auto;text-align:center;min-height:8rem;padding:.65rem}.office-links img{grid-row:auto;width:3.5rem;height:3.5rem;margin:auto}.office-links strong{font-size:1.15rem}.office-heading h1{font-size:3rem}
}