/* EventMapp App-Schicht: PWA, Tabbar, Safe-Areas, Install-Hinweis, Toasts (gilt für alle Seiten) */
:root{--tabbar-h:62px;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
.app-tabbar{display:none}
.em-toast{position:fixed;left:50%;bottom:calc(var(--tabbar-h) + var(--safe-b) + 14px);transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:3000;background:#182632;color:#e7edf4;border:1px solid #314351;border-radius:14px;padding:11px 16px;font-size:13px;font-weight:700;box-shadow:0 14px 36px rgba(0,0,0,.4);transition:.25s ease;max-width:calc(100% - 32px);text-align:center}
.em-toast.show{opacity:1;transform:translate(-50%,0)}
.em-install{display:none;position:fixed;left:10px;right:10px;bottom:calc(var(--tabbar-h) + var(--safe-b) + 12px);z-index:2900;background:#101c27;border:1px solid #314351;border-radius:18px;padding:12px 12px 12px 14px;box-shadow:0 18px 44px rgba(0,0,0,.45);align-items:center;gap:12px;color:#e7edf4}
.em-install.show{display:flex}
.em-install img{width:44px;height:44px;border-radius:12px;flex:0 0 auto}
.em-install .t{flex:1;min-width:0;font-size:13px;line-height:1.35;color:#9aabba}.em-install .t b{display:block;color:#e7edf4;font-size:14px}
.em-install button{border:0;border-radius:11px;padding:10px 14px;font-weight:800;font-size:13px;cursor:pointer}
.em-install .go{background:#32c4cc;color:#071b29}.em-install .x{background:transparent;color:#9aabba;padding:10px 8px}
.em-offline{display:none;position:fixed;top:0;left:0;right:0;z-index:3100;padding:calc(6px + var(--safe-t)) 12px 6px;background:#3a1f26;color:#ffd2d6;text-align:center;font-size:12px;font-weight:750}
body.is-offline .em-offline{display:block}

@media(max-width:900px){
  html{height:100%}
  body{overscroll-behavior-y:none;padding-bottom:calc(var(--tabbar-h) + var(--safe-b))}
  input,select,textarea{font-size:16px!important}
  button,a,.card,.pill,.period{touch-action:manipulation}
  .app-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1500;height:calc(var(--tabbar-h) + var(--safe-b));padding:6px 6px var(--safe-b);background:rgba(11,20,29,.92);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-top:1px solid #273746}
  .app-tabbar a,.app-tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:transparent;color:#8394a4;font:inherit;font-size:11px;font-weight:700;text-decoration:none;border-radius:14px;cursor:pointer;position:relative;min-width:0;transition:color .15s}
  .app-tabbar svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .app-tabbar .on{color:#e7edf4}
  .app-tabbar .on:before{content:"";position:absolute;top:-7px;width:26px;height:3px;border-radius:0 0 3px 3px;background:#32c4cc}
  .app-tabbar .tab-add .plus{width:46px;height:46px;margin-top:-18px;border-radius:50%;display:grid;place-items:center;background:#32c4cc;color:#071b29;box-shadow:0 8px 22px rgba(0,0,0,.45),0 0 0 5px rgba(11,20,29,.92)}
  .app-tabbar .tab-add .plus svg{stroke:#071b29;stroke-width:2.4}
  .app-tabbar .tab-add span.lbl{margin-top:-1px}
  .app-tabbar .tab-add.on:before{display:none}
  .app-tabbar a:active,.app-tabbar button:active{transform:scale(.94)}
}
@media(display-mode:standalone){.em-hide-standalone{display:none!important}}

/* ---- Handy-Feinschliff: Skeletons, Pull-to-Refresh, Beschreibung, Formulare ---- */
.sk-card{padding:14px;border-bottom:1px solid #273746}
.sk{display:block;height:12px;border-radius:7px;margin:0 0 9px;background:linear-gradient(90deg,#182632 0,#223342 50%,#182632 100%);background-size:200% 100%;animation:skShine 1.3s linear infinite}
.sk-s{width:34%}.sk-m{width:88%;height:16px}.sk-l{width:62%}
@keyframes skShine{to{background-position:-200% 0}}
.ptr{height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:height .18s ease;flex:0 0 auto}
.ptr span{width:22px;height:22px;border-radius:50%;border:2.5px solid #314351;border-top-color:#32c4cc;transition:transform .2s}
.ptr.ready span{transform:scale(1.15);border-top-color:#e7edf4}.ptr.spin span{animation:ptrSpin .7s linear infinite}
@keyframes ptrSpin{to{transform:rotate(360deg)}}
.desc-clamp{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}.desc-clamp.open{display:block;-webkit-line-clamp:unset}
.desc-more{margin:-6px 0 12px;padding:6px 0;border:0;background:none;color:#55d7dc;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.drawer{overscroll-behavior:contain}
@media(max-width:900px){
  main.box{width:calc(100% - 28px)!important;max-width:430px!important;margin:18px auto 0!important;padding:22px 18px!important}
  .em-shell{position:sticky;top:0;z-index:50;padding-top:calc(10px + var(--safe-t));padding-bottom:10px;background:rgba(11,20,29,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid #1f2d3a}
  .em-actions{display:none}
  body>main{padding-bottom:24px!important}
  a,button{-webkit-user-select:none;user-select:none}.card,article,p,h1,h2,li,td{-webkit-user-select:text;user-select:text}
}

/* Datenschutz-Dialog: Button immer antippbar, Hinweis statt "totem" Button, große Checkbox */
.privacy-check{padding:12px 13px;border:1px solid #273746;border-radius:13px;background:#0e1a25;cursor:pointer;align-items:center!important;transition:border-color .2s,box-shadow .2s}
.privacy-check input{width:24px!important;height:24px!important;margin:0!important;flex:0 0 24px!important}
.privacy-check label{cursor:pointer}
.privacy-check.need{border-color:#32c4cc;box-shadow:0 0 0 3px rgba(50,196,204,.22);animation:needShake .35s}
.privacy-check.need:after{content:"Bitte hier zustimmen, um fortzufahren.";display:block;flex-basis:100%;order:3;margin-top:4px;font-size:12px;font-weight:700;color:#77e4e7}
.privacy-check.need{flex-wrap:wrap}
.privacy-actions .accept.not-ready{opacity:.6;cursor:pointer}
@keyframes needShake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.privacy-check label{flex:1 1 0;min-width:0}
