/* OdA Sozialberufe – Jahresbericht 2023 — style.css */

/* ── VARIABLES ── */
:root{--black:#0a0a0a;--white:#f5f4f0;--yellow:#f0e96a;--grey:#888;--salmon:#D4756A;--serif:'Georgia',serif;--sans:Arial,sans-serif;--ease:cubic-bezier(.4,0,.2,1);--dur:.9s;--btn-size:70px;}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

/* ── BASE ── */
html,body{width:100%;height:100%;overflow:hidden;background:var(--black);font-family:var(--sans);-webkit-font-smoothing:antialiased;}

/* ── STAGE ── */
#stage{position:fixed;inset:0;}

/* ── SCENES ── */
.scene{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease);}
.scene.active{opacity:1;pointer-events:all;z-index:2;}
.scene.exiting{opacity:0;z-index:1;pointer-events:none;}

/* ── VIDEO / VIMEO ── */
.scene-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.vimeo-wrap{overflow:hidden;background:#000;}
.vimeo-wrap iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-width:177.78vh;min-height:100vh;transform:translate(-50%,-50%);pointer-events:auto;}
.vimeo-wrap #vimeo-player-3{position:absolute;top:auto;left:auto;width:100vw;height:100vh;min-width:100vw;min-height:100vh;transform:none;pointer-events:auto;}

/* ── IMAGE SCENE ── */
.scene-image{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;}
.scene-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;}

/* ── ARROWS ── */
.btn-arrow{position:fixed;bottom:25vh;z-index:130;width:88px;height:88px;border-radius:50%;background:#ee766d;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .25s ease,opacity .25s ease;}
.btn-arrow:hover{transform:scale(1.04);border:1px solid #ffffff;}
.btn-arrow svg{width:34px;height:34px;stroke:#f5f4f0;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
#btn-prev{left:28px;}
#btn-next{right:28px;}
#btn-next .hotspot-tooltip:after{right:0;left:auto;}
.btn-arrow.hidden{opacity:0;pointer-events:none;}
@media(max-width:900px){.btn-arrow{width:64px;height:64px;}}

/* ── CC SUBTITLE BUTTON ── */
#btn-cc,#btn-mute{position:fixed;bottom:24px;z-index:130;background:rgba(0,0,0,.55);border:2px solid rgba(255,255,255,.5);color:rgba(255,255,255,.7);font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.1em;padding:5px 9px;border-radius:4px;cursor:pointer;transition:background .2s,border-color .2s,color .2s;display:none;}
#btn-cc{left:20px;}
#btn-mute{left:70px;display:none;}
#btn-mute svg{width:12px;height:12px;vertical-align:middle;}
#btn-cc.visible,#btn-mute.visible{display:block;}
#btn-cc.active,#btn-cc[aria-pressed="true"],#btn-mute.active,#btn-mute[aria-pressed="true"]{background:#ee766d;border-color:#ee766d;color:#fff;}
#btn-cc:hover,#btn-mute:hover{border-color:#fff;color:#fff;}
@media(max-width:900px){#btn-cc{bottom:20px;left:14px;font-size:10px;padding:4px 7px;}#btn-mute{bottom:20px;left:60px;padding:4px 7px;}}

/* ── MENU BUTTON ── */
#btn-menu{position:fixed;top:26px;right:28px;z-index:130;width:88px;height:88px;border-radius:50%;background:#ee766d;border:1px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:transform .25s ease,opacity .25s ease,border-color .25s ease;}
#btn-menu:hover{transform:scale(1.04);border:1px solid #ffffff;}
#btn-menu span{display:block;width:43px;height:2px;background:#f5f4f0;border-radius:2px;margin-bottom: 2px;}
#btn-menu.nav-open{opacity:0;pointer-events:none;}
@media(max-width:900px){#btn-menu{top:18px;right:18px;width:64px;height:64px;gap:7px;align-items:center;justify-content:center;}#btn-menu span{width:28px;height:2px;}}

/* ── NAV OPEN STATE ── */
body.nav-open .btn-arrow:not(.hidden){z-index:100;opacity:.4;pointer-events:none;}
body.nav-open .btn-arrow.hidden{opacity:0;pointer-events:none;}

/* ── FIXED SITE LOGO ── */
#site-logo{position:fixed;right:34px;bottom:34px;width:148px;height:148px;z-index:9999;cursor:pointer;border-radius:50%;transition:opacity .45s var(--ease);}
#site-logo img{width:100%;height:100%;display:block;}
body.nav-open #site-logo{opacity:0;pointer-events:none;}

/* ── NAV SIDEBAR ── */
#nav-menu{position:fixed;top:0;right:0;width:548px;max-width:100%;height:100vh;z-index:120;opacity:0;pointer-events:none;transform:translateX(100%);transition:transform .45s var(--ease),opacity .45s var(--ease);}
#nav-menu.open{opacity:1;pointer-events:auto;transform:translateX(0);}
#nav-menu .nav-sidebar-inner{position:relative;width:100%;height:100%;background:#58757b;padding:118px 56px 46px 42px;overflow-y:auto;}
#nav-close{position:absolute;top:26px;right:28px;width:88px;height:88px;border:none;border-radius:50%;background:#ee766d;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .25s ease,opacity .25s ease;}
#nav-close:hover{transform:scale(1.04);}
#nav-close span{position:absolute;width:50px;height:2px;background:#f5f4f0;display:block;}
#nav-close span:first-child{transform:rotate(45deg);}
#nav-close span:last-child{transform:rotate(-45deg);}
#nav-menu .nav-content{position:relative;z-index:2;max-width:330px;}
#nav-menu .nav-kicker{font-size:15px;line-height:1.2;font-weight:500;color:#f5f4f0;margin-bottom:26px;}
#nav-menu .nav-list{display:flex;flex-direction:column;gap:10px;}
#nav-menu .nav-item{display:block;text-decoration:none;color:#f5f4f0;border:1px solid transparent;padding:6px 8px 6px 0;transition:border-color .25s ease,background-color .25s ease;font-size:1.4em;line-height:1.3;}
#nav-menu .nav-item:hover,#nav-menu .nav-item:hover span{color:#ee766d;}
#nav-menu .nav-item strong{display:block;font-size:27px;line-height:1.14;font-weight:600;margin-bottom:4px;color:#f5f4f0;}
#nav-menu .nav-item span{display:block;font-size:0.8em;line-height:1.4;color:#f5f4f0;}
#nav-menu .nav-item-simple strong{margin-bottom:0;}
#nav-menu .nav-logo{position:absolute;right:34px;bottom:34px;width:148px;height:148px;display:flex;align-items:center;justify-content:center;z-index:1;}
#nav-menu .nav-logo img{max-width:100%;max-height:100%;display:block;object-fit:contain;}
#nav-menu .nav-logo svg{width:100%;height:100%;display:block;}
@media(max-width:900px){#nav-menu{width:100%;}#nav-menu .nav-sidebar-inner{padding:88px 28px 28px 24px;}#nav-close{top:18px;right:18px;width:64px;height:64px;}#nav-close span{width:26px;}#nav-menu .nav-content{max-width:100%;padding-right:86px;}#nav-menu .nav-kicker{font-size:14px;margin-bottom:20px;}#nav-menu .nav-list{gap:20px;}#nav-menu .nav-item{padding:4px 6px 4px 0;}#nav-menu .nav-item strong{font-size:19px;line-height:1.2;}#nav-menu .nav-item span{font-size:14px;line-height:1.4;}#nav-menu .nav-logo{width:104px;height:104px;right:18px;bottom:18px;}}

/* ── PROGRESS BAR ── */
#progress-bar{position:fixed;bottom:0;left:0;right:0;z-index:200;height:4px;background:rgba(255,255,255,.2);cursor:pointer;display:none;}
#progress-fill{height:100%;width:0%;background:var(--salmon);transition:width .25s linear;pointer-events:none;}

/* ── CURSOR ── */
a:not([href]),a[href="javascript:void(0);"]{cursor:pointer;}

/* ══════════════════════════════════════════════════════════
   SCENE 02 — BOXES
══════════════════════════════════════════════════════════ */
#s2 .scene-s2-1{width:380px;height:260px;background:#e8a89c;position:absolute;top:80px;left:60px;border-left:6px solid #c0392b;padding:28px;overflow-y:auto;cursor:grab;user-select:none;}
#s2 .scene-s2-1.dragging{cursor:grabbing;box-shadow:0 8px 32px rgba(0,0,0,.25);}
#s2 .scene-s2-1 .box-label{display:block;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#7b1e1e;margin-bottom:10px;}
#s2 .scene-s2-1 h1{font-size:26px;font-weight:800;color:#1a0a0a;line-height:1.1;margin-bottom:6px;}
#s2 .scene-s2-1 h2{font-size:11px;font-weight:600;color:#5a2020;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid rgba(0,0,0,.15);}
#s2 .scene-s2-1 p{font-size:13px;font-weight:400;color:#2a0a0a;line-height:1.75;}
#s2 .scene-s2-2{width:300px;height:280px;background:#a8cfe8;position:absolute;bottom:60px;right:140px;border-left:6px solid #1a6fa8;padding:24px;overflow-y:auto;cursor:grab;user-select:none;}
#s2 .scene-s2-2.dragging{cursor:grabbing;box-shadow:0 8px 32px rgba(0,0,0,.25);}
#s2 .scene-s2-2 p{font-size:13px;font-weight:400;color:#0a1a2a;line-height:1.75;margin-bottom:12px;}
#s2 .scene-s2-2 p:last-child{margin-bottom:0;}

/* ══════════════════════════════════════════════════════════
   HOTSPOTS
══════════════════════════════════════════════════════════ */
.s3-hotspots{position:absolute;inset:0;pointer-events:none;z-index:10;}
.s2-hotspots{position:absolute;inset:0;pointer-events:none;z-index:10;}
.hotspot{position:absolute;pointer-events:auto;margin-left:-44px;margin-top:-44px;z-index:1;}
.hotspot-tooltip{position:absolute;bottom:calc(100% + 40px);left:50%;transform:translateX(0);background:#ee766d;color:#fff;padding:10px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s;font-family:var(--sans);font-size:1em;line-height:1.3;z-index:1;}
[data-panel="timeline"] .hotspot-tooltip{right:50%;left:auto;}
[data-panel="timeline"] .hotspot-tooltip::after{left:auto;right:0;}
.hotspot-tooltip strong{display:block;font-weight:700;color:#fff;font-size:13px;margin:0;}
.hotspot-tooltip span{display:block;font-size:0.8em;color:rgba(255,255,255,.85);margin-top:2px;}
.hotspot-tooltip::after{content:'';position:absolute;bottom:-84px;left:0;width:2px;height:84px;background:#ee766d;}
.hotspot:hover .hotspot-tooltip,.hotspot.touch-active .hotspot-tooltip{opacity:1;}
.hotspot.touch-active{z-index: 9;}
.hotspot-btn{background:#58757b;border:none;border-radius:50%;color:transparent;font-size:0;width:88px;height:88px;cursor:pointer;padding:0;position:relative;z-index:2;transition:background .2s,transform .2s;}
.hotspot-btn::before,.hotspot-btn::after{content:'';position:absolute;background:#fff;border-radius:1px;transition:background .2s;}
/*.hotspot-btn::before{width:2px;height:40%;top:30%;left:50%;transform:translateX(-50%);}
.hotspot-btn::after{width:40%;height:2px;left:30%;top:50%;transform:translateY(-50%);}*/
.hotspot-btn:hover{transform:scale(1.15);}
.hotspot-btn:hover::before,.hotspot-btn:hover::after{background:var(--salmon);}
/* ── MODAL BACKDROP ── */
.modal-backdrop{position:fixed;inset:0;width:100vw;height:100vh;background:rgba(0,0,0,.5);z-index:199;display:none;align-items:center;justify-content:center;cursor:pointer;}
body.modal-open .modal-backdrop{display:flex;}
body.modal-open #btn-menu{opacity:0;pointer-events:none;}
/* ── MODAL CARD ── */
.hotspot-card{display:none;background:#ffffff;color:#000;width:700px;max-height:80vh;overflow-y:auto;padding:40px;cursor:default;transform:scale(.95);opacity:0;transition:opacity .25s var(--ease),transform .25s var(--ease);}
.hotspot-card.active{display:block;opacity:1;transform:scale(1);}
.hotspot-card strong{display:block;font-size:20px;font-weight:700;margin-bottom:4px;}
.hotspot-card table strong{font-size:1.2em;}
.hotspot-card .card-body strong{font-size:1.2em;margin-bottom: 0;color:#000;line-height:normal;font-weight: 700;}
.hotspot-card .card-body strong + br{display:none;}
.hotspot-card small{display:block;font-size:20px;margin-bottom:16px;font-weight:700;}
.hotspot-card .card-body p{display:block;font-size:1.2em;margin-bottom:16px;}
.hotspot-card .card-body ul{margin-bottom:16px;}
.hotspot-card .card-body li{font-size:1.2em;}
#modal-close{position:fixed;top:26px;right:28px;width:88px;height:88px;border:none;border-radius:50%;background:#ee766d;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;}
#modal-close:hover{transform:scale(1.04);}
#modal-close span{position:absolute;width:34px;height:2px;background:#f5f4f0;display:block;}
#modal-close span:first-child{transform:rotate(45deg);}
#modal-close span:last-child{transform:rotate(-45deg);}
body.modal-open #modal-close{opacity:1;pointer-events:auto;}
@media(max-width:900px){#modal-close{top:18px;right:18px;width:64px;height:64px;}#modal-close span{width:24px;}}
.card-body{font-size:14px;line-height:1.7;color:#000;}
.card-body h4{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#000;margin-bottom:8px;margin-top:16px;}
.card-body h4:first-child{margin-top:0;}
.card-body ul{list-style:none;margin-bottom:12px;}
.card-body ul li{font-size:13px;line-height:1.7;padding-left:20px;position:relative;color:#000;}
.card-body ul li::before{content:'–';position:absolute;left:0;color:#000;}
.card-body p{margin-bottom:10px;color:#000;}
.card-body p:last-child{margin-bottom:0;}
.org-section{margin-bottom:20px;}
.org-section h4{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#000;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid rgba(0,0,0,.1);}
.org-section ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2px 16px;}
.org-section ul li{font-size:12px;line-height:1.7;color:#000;}
.org-note{font-size:12px;line-height:1.65;color:#000;margin-bottom:20px;font-style:italic;}
[data-panel="organisation"] .card-body p{margin-bottom: 5px;}
[data-panel="organisation"] .card-body p strong{margin-top: 15px;}
[data-panel="finanzen"] table {width: 100%;min-width: 500px;}
[data-panel="finanzen"] table tr td:first-child {width: 50%;}
[data-panel="finanzen"] table tr td:nth-child(2) {width: 25%;text-align: right;}
[data-panel="finanzen"] table tr td:nth-child(3) {text-align: right;}
.borderBottom{border-bottom: 1px solid #000;}
[data-panel="finanzen"] table+p strong,
[data-panel="finanzen"] table strong{font-size: 1em;}
[data-panel="finanzen"] table {margin-top: 10px;margin-bottom: 10px;}
/* ══════════════════════════════════════════════════════════
   TABLET — LANDSCAPE (max 1024px)
══════════════════════════════════════════════════════════ */

@media(max-width:1024px){#s2 .scene-s2-1{width:300px;height:210px;top:60px;left:40px;padding:20px;}#s2 .scene-s2-1 h1{font-size:20px;}#s2 .scene-s2-2{width:240px;height:220px;bottom:40px;right:90px;padding:18px;}}

/* ══════════════════════════════════════════════════════════
   20px EDGE MARGINS — modal + hotspot clickability (max 980px)
══════════════════════════════════════════════════════════ */
@media(max-width:980px){
  .modal-backdrop{padding:20px;}
  .hotspot-card{width:calc(100vw - 40px);max-width:calc(100vw - 40px);}
  .s2-hotspots,.s3-hotspots{inset:0 20px 20px 20px;}
}

/* ══════════════════════════════════════════════════════════
   TABLET — PORTRAIT (max 768px)
══════════════════════════════════════════════════════════ */
@media(max-width:768px){#s2 .scene-s2-1{width:240px;height:190px;top:40px;left:24px;padding:16px;}#s2 .scene-s2-1 h1{font-size:17px;}#s2 .scene-s2-2{width:200px;height:190px;bottom:30px;right:60px;padding:14px;}.hotspot-card{padding:80px 28px 28px;}.modal-close{width:64px;height:64px;}.modal-close span{width:24px;}}

/* ══════════════════════════════════════════════════════════
   MOBILE (max 700px)
══════════════════════════════════════════════════════════ */
@media(max-width:700px),(max-height:700px){html,body{overflow-y:auto;height:auto;}#stage{position:fixed;inset:0;z-index:0;}.scene-video{position:fixed;inset:0;}.scene-image{position:fixed;inset:0;}.vimeo-wrap iframe{position:fixed;}:root{--btn-size:40px;}#btn-prev{left:18px;}#btn-next{right:18px;}#btn-menu{position:fixed;top:18px;right:18px;width:64px;height:64px;gap:7px;align-items:center;justify-content:center;z-index:200;}#btn-menu span{width:28px;height:2px;}#nav-menu{width:100%;}#nav-menu .nav-sidebar-inner{padding:80px 20px 40px 20px;}#nav-close{top:16px;right:16px;width:52px;height:52px;}#nav-close span{width:22px;}#nav-menu .nav-item strong{font-size:20px;}#nav-menu .nav-item span{font-size:14px;}#nav-menu .nav-list{gap:16px;}#nav-menu .nav-logo{width:80px;height:80px;right:16px;bottom:16px;}#site-logo{width:80px;height:80px;right:16px;bottom:16px;}.hotspot-tooltip{font-size:11px;padding:6px;bottom:calc(100% + 24px);white-space:normal;max-width:none;width:20vw;min-width:140px;}.hotspot-tooltip::after{height:24px;bottom:-24px;}.hotspot-card{max-width:95vw;padding:80px 20px 24px;}.modal-close{width:52px;height:52px;top:12px;right:12px;}.modal-close span{width:22px;}#mobile-blocks{position:relative;z-index:10;min-height:100vh;padding-top:100vh;padding-bottom:60px;pointer-events:none;}#mobile-blocks .scene-block{position:relative!important;top:auto!important;left:auto!important;bottom:auto!important;right:auto!important;width:350px;max-width:calc(100vw - 32px);height:auto!important;overflow-y:visible!important;cursor:default!important;margin:0 auto 16px auto;box-shadow:none!important;pointer-events:auto;}.hotspot-card[data-panel="timeline"]{width:85vw!important;max-height:85vh!important;max-width:85vw!important;}.hotspot-card[data-panel="timeline"]>div{width:auto!important;height:auto!important;}.hotspot-card[data-panel="timeline"]>div>iframe{width:100%!important;height:80vh!important;}.hotspot-btn{width: 58px;height: 58px;}.hotspot-btn svg{width:20px!important;height:20px!important;}.btn-arrow .hotspot-tooltip{width:auto;}}
/* ══════════════════════════════════════════════════════════
   HOTSPOT GRID 3-1-3 — mobile (max 700px)
══════════════════════════════════════════════════════════ */
@media(max-width:700px){
  .s2-hotspots,.s3-hotspots{
    display:flex;flex-wrap:wrap;
    justify-content:space-around;align-content:space-around;align-items:center;
    padding:140px 20px 80px;inset:0;
    pointer-events:auto;
  }
  .s2-hotspots .hotspot,.s3-hotspots .hotspot{
    position:relative!important;left:auto!important;top:auto!important;
    margin:0;width:50%;
    display:flex;justify-content:center;align-items:center;
    pointer-events:auto;
  }
  .s2-hotspots .hotspot:nth-child(4),.s3-hotspots .hotspot:nth-child(4){
    width:100%;justify-content:center;
  }
  .hotspot-tooltip{bottom:calc(100% + 24px);white-space:normal;max-width:110px;}
  .hotspot-tooltip::after{height:24px;bottom:-24px;}
}
/* ══════════════════════════════════════════════════════════
   VERY SMALL (max 400px)
══════════════════════════════════════════════════════════ */
@media(max-width:400px){.hotspot-tooltip{font-size:10px;padding:4px 6px;max-width:90px;}.hotspot-card{max-width:98vw;padding:70px 14px 20px;}}

/* ── LOADER ── */
#loader{position:fixed;inset:0;z-index:999;background:var(--black);display:flex;align-items:center;justify-content:center;transition:opacity .6s var(--ease);}
#loader.hidden{opacity:0;pointer-events:none;}
.loader-inner{display:flex;flex-direction:column;align-items:center;gap:16px;}
.loader-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--salmon);border-radius:50%;animation:spin .8s linear infinite;}
.loader-text{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.4);}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── PLAY BUTTON ── */
#play-btn{position:fixed;inset:0;z-index:1000;background:var(--black);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .6s var(--ease);}
#play-btn svg{width:90px;height:90px;fill:var(--salmon);filter:drop-shadow(0 0 20px rgba(212,117,106,.4));}
#play-btn:hover svg{fill:var(--white);}
#play-btn.hidden{opacity:0;pointer-events:none;}

/* ── ARROW LOADING STATE ── */
.btn-arrow.loading svg{display:none;}
.btn-arrow.loading::after{content:'';width:28px;height:28px;border:3px solid rgba(255,255,255,.2);border-top-color:var(--white);border-radius:50%;animation:spin .6s linear infinite;}