| Server IP : 202.61.199.114 / Your IP : 216.73.217.139 Web Server : nginx/1.22.1 System : Linux de.arni-solutions.de 6.1.0-49-amd64 #1 SMP PREEMPT_DYNAMIC Debian 6.1.174-1 (2026-05-26) x86_64 User : web20 ( 1018) PHP Version : 8.4.23 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /proc/self/root/tmp/ |
Upload File : |
<!DOCTYPE html><html lang="de"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover"><meta name="robots" content="noindex,nofollow"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="theme-color" content="#0d2c44"><link rel="manifest" href="https://seaside.pacim.de/manifest.php?t=2dd71a8dcf859fa78a7025e7"><link rel="apple-touch-icon" href="https://seaside.pacim.de/assets/webapp/icon-180.png"><meta name="apple-mobile-web-app-title" content="Seaside Parking"><title>Dashboard Sa, 27.06.2026</title><style>
@font-face{font-family:"EuroPlate";src:url("https://seaside.pacim.de/assets/fonts/EuroPlate.ttf") format("truetype");font-display:swap;}
:root{--navy:#0d2c44;--navy2:#11436b;--blue:#1b6ca8;--green:#2fb344;--red:#d63939;--gold:#f3b53f;--ink:#16384f;--muted:#5b7488;--line:#e6eef4;}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#eef3f7;color:var(--ink);padding:0 0 40px;touch-action:manipulation;}
.wrap{max-width:560px;margin:0 auto;}
.topbar{position:sticky;top:0;z-index:6;}
/* iOS: Inhalt nicht unter Dynamic Island / Statusleiste schieben (viewport-fit=cover + Safe-Area). */
.hd{position:relative;background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 65%,var(--blue) 130%);color:#fff;
padding:calc(20px + env(safe-area-inset-top,0px)) calc(18px + env(safe-area-inset-right,0px)) 18px calc(18px + env(safe-area-inset-left,0px));}
.term-back{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:calc(14px + env(safe-area-inset-right,0px));
display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.16);color:#fff;text-decoration:none;
border-radius:9px;padding:7px 12px;font-size:13px;font-weight:700;-webkit-tap-highlight-color:transparent;}
.term-back:active{background:rgba(255,255,255,.3);}
.term-back svg{width:16px;height:16px;}
.hd .k{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.8;}
.hd .t{font-size:21px;font-weight:800;margin-top:2px;}
.hd .sub{font-size:12.5px;opacity:.85;margin-top:3px;}
.stats{display:flex;gap:8px;margin-top:9px;}
.stat{background:rgba(255,255,255,.14);border-radius:10px;padding:6px 11px;font-size:12.5px;font-weight:600;}
.stat b{font-size:15px;} .stat.open b{color:#ffd0cf;}
.stat.filt{cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:background .15s ease,box-shadow .15s ease;}
.stat.filt.active{background:rgba(255,255,255,.34);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6);}
.stat.live{display:inline-flex;align-items:center;gap:6px;}
.live-dot{width:8px;height:8px;border-radius:50%;background:#34d058;box-shadow:0 0 0 0 rgba(52,208,88,.6);animation:dlpulse 2s infinite;}
.stat.live.stale .live-dot{background:#ffb84d;animation:none;}
@keyframes dlpulse{0%{box-shadow:0 0 0 0 rgba(52,208,88,.6);}70%{box-shadow:0 0 0 7px rgba(52,208,88,0);}100%{box-shadow:0 0 0 0 rgba(52,208,88,0);}}
@media (prefers-reduced-motion: reduce){ .live-dot{animation:none;} }
/* Check-in-Overlay (Iframe, kein Seitenreload) */
/* Bottom-Abstand für die eingebettete Einzelansicht (iframe liest env() selbst nicht):
iPhone-Home-Indikator (inset>0) freihalten; Android (inset≈0) übernimmt die Tableiste selbst. */
.ov{position:fixed;inset:0;z-index:50;background:#fff;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom,0px);}
/* Safe-Area kann das eingebettete iframe (checkin.php) selbst NICHT lesen (env()=0 im iframe),
darum hier oben ein navyfarbener Streifen (= Header-Farbe) unter der Dynamic Island/Statusleiste. */
.ov-top{flex:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--navy);}
.ov-frame{flex:1 1 auto;width:100%;border:0;background:#fff;min-height:0;}
.row-flash{animation:dlflash 1.1s ease-out;}
@keyframes dlflash{0%{background:#fff6cc;}100%{}}
/* Sitzungsende-Bildschirm */
.ended{position:fixed;inset:0;z-index:60;background:linear-gradient(160deg,var(--navy) 0%,var(--navy2) 70%,var(--blue) 140%);display:flex;align-items:center;justify-content:center;padding:24px;}
.ended-box{text-align:center;color:#fff;max-width:340px;}
.ended-ic{width:64px;height:64px;color:#cfe2f2;margin:0 auto 16px;}
.ended-t{font-size:24px;font-weight:800;}
.ended-x{font-size:14.5px;opacity:.85;margin-top:10px;line-height:1.5;}
.flt{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;}
.chip{background:rgba(255,255,255,.16);border-radius:999px;padding:3px 9px;font-size:11.5px;font-weight:600;}
.search{background:#fff;padding:10px 14px;border-bottom:1px solid var(--line);}
.search-box{position:relative;}
.search input{width:100%;padding:11px 40px 11px 14px;border:1px solid var(--line);border-radius:10px;font-size:15px;background:#f6f9fc;}
.search input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;}
.search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:50%;
background:#e6eef4;color:var(--navy);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.search-clear:active{filter:brightness(.94);}
.d-none{display:none!important;}
/* Meinten Sie? – Vorschläge bei ähnlichem Kennzeichen */
.suggest{background:#fff8e6;border-bottom:1px solid #f3e3b0;padding:10px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.suggest .sg-l{font-size:12.5px;font-weight:700;color:#8a6400;}
.suggest .sg-chip{background:#fff;border:1.5px solid #e8c766;border-radius:8px;padding:6px 12px;font-size:14px;font-weight:800;color:var(--navy);cursor:pointer;font-family:inherit;}
.suggest .sg-chip:active{filter:brightness(.95);}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;background:#fff;}
.tbl{width:100%;border-collapse:collapse;background:#fff;}
.tbl th{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;
padding:9px 10px;border-bottom:2px solid var(--line);background:#f6f9fc;}
.tbl td{padding:12px 10px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle;}
.tbl tbody tr{cursor:pointer;}
/* Zeilen-Status: eingecheckt grün, Zahlung offen orange, bezahlt aber nicht eingecheckt leicht blau */
.tbl tbody tr.st-in{background:rgba(47,179,68,.20);box-shadow:inset 3px 0 0 #2fb344;}
.tbl tbody tr.st-open{background:rgba(245,159,0,.20);box-shadow:inset 3px 0 0 #f59f00;}
.tbl tbody tr.st-paid{background:rgba(27,108,168,.13);box-shadow:inset 3px 0 0 #1b6ca8;}
.tbl tbody tr.st-storno{background:rgba(214,57,57,.12);box-shadow:inset 3px 0 0 #d63939;}
.tbl tbody tr.st-storno .plate{text-decoration:line-through;color:#a23030;}
/* außerhalb des Filters – nur per Suche sichtbar, dezent + Markierung */
.tbl tbody tr.row-out{display:none;background:#f4f6f9;box-shadow:inset 3px 0 0 #b6c2cf;opacity:.92;}
.outflag{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#6b7a89;background:#e4e9ef;border-radius:5px;padding:1px 6px;margin-left:6px;vertical-align:middle;}
.pcam{display:inline-flex;align-items:center;gap:2px;font-size:11px;font-weight:700;color:var(--blue);background:rgba(27,108,168,.10);border-radius:5px;padding:1px 5px;margin-left:6px;vertical-align:middle;white-space:nowrap;}
.pcam svg{width:12px;height:12px;}
.tbl tbody tr:active{filter:brightness(.96);}
/* Kennzeichen in der FE-Schrift (EuroPlate). Nur ein Schnitt -> „fett" per Kontur. */
.plate{font-family:"EuroPlate",-apple-system,Segoe UI,Roboto,sans-serif;font-weight:800;letter-spacing:.5px;color:var(--navy);white-space:nowrap;-webkit-text-stroke:.45px currentColor;}
.nm{font-weight:600;}
.mut{color:var(--muted);}
mark{background:#ffd54a;color:#3a2c00;border-radius:2px;padding:0 1px;}
.empty{padding:40px 20px;text-align:center;color:var(--muted);}
.foot{font-size:12px;color:var(--muted);text-align:center;padding:16px;}
.err{max-width:440px;margin:60px auto;background:#fff;border-radius:18px;padding:34px 26px;text-align:center;box-shadow:0 14px 40px rgba(13,44,68,.16);}
.err h1{font-size:40px;color:var(--navy);} .err p{color:var(--muted);margin-top:8px;}
/* PIN-Sperrbildschirm: gemeinsame Komponente (pacim_pin_css), siehe dl_pin_screen(). */
/* ---- ressourcenarme Animationen: nur opacity/transform (Compositor), keine Layout-Props ---- */
@keyframes dlFadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes dlFade{from{opacity:0;}to{opacity:1;}}
@keyframes dlSheet{from{opacity:.3;transform:translateY(16px);}to{opacity:1;transform:none;}}
@keyframes dlPop{from{opacity:0;transform:scale(.92);}to{opacity:1;transform:none;}}
.tblwrap{animation:dlFadeUp .28s ease both;}
.suggest:not(.d-none){animation:dlFadeUp .18s ease;}
.ov:not(.d-none){animation:dlFade .18s ease;}
.ov-frame{animation:dlSheet .24s cubic-bezier(.22,.61,.36,1);}
.ended:not(.d-none){animation:dlFade .25s ease;}
.ended-box{animation:dlPop .32s cubic-bezier(.22,.61,.36,1) both;}
.tbl tbody tr{transition:background .25s ease;}
@media (prefers-reduced-motion: reduce){
.tblwrap,.suggest,.ov,.ov-frame,.ended,.ended-box,.row-flash,.pin-card.shake{animation:none!important;}
.tbl tbody tr{transition:none;} .pin-key.lit,.pin-key:active{transform:none;}
}
</style></head><body> <div class="wrap">
<div class="hd">
<div class="k">Dashboard · Anreisetag</div>
<div class="t">Sa, 27.06.2026</div>
<div class="stats"><span class="stat"><b>533</b> Gäste · 2 Schiffe</span></div>
<div class="flt"><span class="chip">ZZ_DASH</span><span class="chip">Dashboard</span></div> </div>
<div class="dash-shell">
<section class="dash-pane active" data-pane="t7">
<div class="dash-card">
<div class="dash-card-h">AIDAdiva <span class="dash-muted">· 7 Tage</span></div>
<div class="dash-sub">Reise bis 04.07.2026</div> <div class="dash-stat ">
<div class="dash-stat-t">Parken-am-Schiff.de</div>
<div class="dash-grid">
<div><span class="dl">Halle</span><span class="dv h">4</span></div> <div><span class="dl">Außen</span><span class="dv a">8</span></div> <div><span class="dl">Valet</span><span class="dv v">–</span></div> <div class="g"><span class="dl">Gesamt</span><span class="dv">12</span></div>
</div>
</div>
<div class="dash-stat ">
<div class="dash-stat-t">AIDA-Vorbucher</div>
<div class="dash-grid">
<div><span class="dl">Halle</span><span class="dv h">36</span></div> <div><span class="dl">Außen</span><span class="dv a">138</span></div> <div><span class="dl">Valet</span><span class="dv v">19</span></div> <div class="g"><span class="dl">Gesamt</span><span class="dv">174</span></div>
</div>
</div>
<div class="dash-stat is-total">
<div class="dash-stat-t">Gesamt</div>
<div class="dash-grid">
<div><span class="dl">Halle</span><span class="dv h">40</span></div> <div><span class="dl">Außen</span><span class="dv a">146</span></div> <div><span class="dl">Valet</span><span class="dv v">19</span></div> <div class="g"><span class="dl">Gesamt</span><span class="dv">186</span></div>
</div>
</div>
</div>
</section>
<section class="dash-pane" data-pane="t14">
<div class="dash-card">
<div class="dash-card-h">AIDAdiva <span class="dash-muted">· 14 Tage</span></div>
<div class="dash-sub">Reise bis 11.07.2026</div> <div class="dash-stat ">
<div class="dash-stat-t">Parken-am-Schiff.de</div>
<div class="dash-grid">
<div><span class="dl">Halle</span><span class="dv h">1</span></div> <div><span class="dl">Außen</span><span class="dv a">–</span></div> <div><span class="dl">Valet</span><span class="dv v">–</span></div> <div class="g"><span class="dl">Gesamt</span><span class="dv">1</span></div>
</div>
</div>
<div class="dash-stat ">
<div class="dash-stat-t">AIDA-Vorbucher</div>
<div class="dash-grid">
<div><span class="dl">Halle</span><span class="dv h">3</span></div> <div><span class="dl">Außen</span><span class="dv a">12</span></div> <div><span class="dl">Valet</span><span class="dv v">2</span></div> <div class="g"><span class="dl">Gesamt</span><span class="dv">15</span></div>
</div>
</div>
<div class="dash-stat is-total">
<div class="dash-stat-t">Gesamt</div>
<div class="dash-grid">
<div><span class="dl">Halle</span><span class="dv h">4</span></div> <div><span class="dl">Außen</span><span class="dv a">12</span></div> <div><span class="dl">Valet</span><span class="dv v">2</span></div> <div class="g"><span class="dl">Gesamt</span><span class="dv">16</span></div>
</div>
</div>
</div>
</section>
<section class="dash-pane" data-pane="charts">
<div class="chart">
<div class="chart-t">Halle</div>
<div class="chart-row">
<div class="chart-lbl">AIDAdiva · 7T</div>
<div class="chart-track"><div class="chart-bar h" style="width:100%"></div></div>
<div class="chart-val">40</div>
</div>
<div class="chart-row">
<div class="chart-lbl">AIDAdiva · 14T</div>
<div class="chart-track"><div class="chart-bar h" style="width:10%"></div></div>
<div class="chart-val">4</div>
</div>
</div>
<div class="chart">
<div class="chart-t">Halle · ohne Valet</div>
<div class="chart-row">
<div class="chart-lbl">AIDAdiva · 7T</div>
<div class="chart-track"><div class="chart-bar h" style="width:100%"></div></div>
<div class="chart-val">36</div>
</div>
<div class="chart-row">
<div class="chart-lbl">AIDAdiva · 14T</div>
<div class="chart-track"><div class="chart-bar h" style="width:8%"></div></div>
<div class="chart-val">3</div>
</div>
</div>
<div class="chart">
<div class="chart-t">Außen</div>
<div class="chart-row">
<div class="chart-lbl">AIDAdiva · 7T</div>
<div class="chart-track"><div class="chart-bar a" style="width:100%"></div></div>
<div class="chart-val">146</div>
</div>
<div class="chart-row">
<div class="chart-lbl">AIDAdiva · 14T</div>
<div class="chart-track"><div class="chart-bar a" style="width:8%"></div></div>
<div class="chart-val">12</div>
</div>
</div>
<div class="chart">
<div class="chart-t">Außen · ohne Valet</div>
<div class="chart-row">
<div class="chart-lbl">AIDAdiva · 7T</div>
<div class="chart-track"><div class="chart-bar a" style="width:100%"></div></div>
<div class="chart-val">131</div>
</div>
<div class="chart-row">
<div class="chart-lbl">AIDAdiva · 14T</div>
<div class="chart-track"><div class="chart-bar a" style="width:8%"></div></div>
<div class="chart-val">11</div>
</div>
</div>
<div class="chart">
<div class="chart-t">Valet</div>
<div class="chart-row">
<div class="chart-lbl">AIDAdiva · 7T</div>
<div class="chart-track"><div class="chart-bar v" style="width:100%"></div></div>
<div class="chart-val">19</div>
</div>
<div class="chart-row">
<div class="chart-lbl">AIDAdiva · 14T</div>
<div class="chart-track"><div class="chart-bar v" style="width:11%"></div></div>
<div class="chart-val">2</div>
</div>
</div>
<div class="chart">
<div class="chart-t">7 Tage · ohne Valet</div>
<div class="chart-row">
<div class="chart-lbl">AIDAdiva</div>
<div class="chart-track"><div class="chart-bar g2" style="width:100%"></div></div>
<div class="chart-val">167</div>
</div>
</div>
<div class="chart">
<div class="chart-t">14 Tage · ohne Valet</div>
<div class="chart-row">
<div class="chart-lbl">AIDAdiva</div>
<div class="chart-track"><div class="chart-bar g2" style="width:100%"></div></div>
<div class="chart-val">14</div>
</div>
</div>
</section>
</div>
<nav class="dash-tabs" id="dashTabs">
<button type="button" class="dash-tab active" data-tab="t7"><span class="dt-n">7</span><span class="dt-l">Tage</span></button>
<button type="button" class="dash-tab" data-tab="t14"><span class="dt-n">14</span><span class="dt-l">Tage</span></button>
<button type="button" class="dash-tab" data-tab="charts"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:20px;height:20px;"><path d="M3 3v18h18"/><rect x="7" y="10" width="3" height="7"/><rect x="12" y="6" width="3" height="11"/><rect x="17" y="13" width="3" height="4"/></svg><span class="dt-l">Diagramme</span></button>
</nav>
</div>
<style>
.dash-shell{padding:14px;display:flex;flex-direction:column;gap:14px;padding-bottom:calc(72px + env(safe-area-inset-bottom,0px));}
.dash-pane{display:none;flex-direction:column;gap:14px;}
.dash-pane.active{display:flex;}
.dash-card{background:#fff;border-radius:14px;box-shadow:0 2px 10px rgba(13,44,68,.07);padding:14px 14px 4px;}
.dash-card.dash-sumcard{border:1.5px solid #d7e3ee;}
.dash-card-h{font-size:17px;font-weight:800;color:#16384f;}
.dash-muted{font-weight:600;opacity:.55;font-size:14px;}
.dash-sub{font-size:12.5px;opacity:.6;margin-top:1px;}
.dash-stat{margin-top:12px;}
.dash-stat-t{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;opacity:.6;margin-bottom:6px;}
.dash-stat.is-total .dash-stat-t{color:#1b6ca8;opacity:1;}
.dash-grid{display:flex;gap:6px;}
.dash-grid>div{flex:1;background:#f1f5f9;border-radius:10px;padding:9px 4px;text-align:center;}
.dash-grid>div.g{background:#e7eef5;}
.dash-grid .dl{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;opacity:.6;}
.dash-grid .dv{display:block;font-size:22px;font-weight:800;line-height:1.15;margin-top:2px;}
/* Zahlen farbig wie im PaCIM CRM: Halle rot, Außen grün, Valet blau, Gesamt navy. */
.dash-grid .dv.h{color:#c0392b;} .dash-grid .dv.a{color:#1d7a33;} .dash-grid .dv.v{color:#1b6ca8;}
.dash-grid>div.g .dv{color:#0d2c44;}
/* Diagramme */
.chart{background:#fff;border-radius:14px;box-shadow:0 2px 10px rgba(13,44,68,.07);padding:14px;}
.chart-t{font-size:14px;font-weight:800;color:#16384f;margin-bottom:10px;}
.chart-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.chart-row:last-child{margin-bottom:0;}
.chart-lbl{flex:0 0 40%;font-size:12px;font-weight:600;color:#16384f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chart-track{flex:1;background:#eef3f7;border-radius:6px;height:15px;overflow:hidden;}
.chart-bar{height:100%;border-radius:6px;background:#1b6ca8;transition:width .3s ease;}
.chart-bar.h{background:#c0392b;} .chart-bar.a{background:#1d7a33;} .chart-bar.v{background:#1b6ca8;} .chart-bar.g2{background:#11436b;}
.chart-val{flex:0 0 auto;min-width:26px;text-align:right;font-weight:800;font-size:13px;color:#16384f;}
/* Footer-Tabs */
.dash-tabs{position:fixed;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;display:flex;background:#fff;border-top:1px solid #e6eef4;box-shadow:0 -2px 14px rgba(13,44,68,.1);padding-bottom:env(safe-area-inset-bottom,0px);z-index:20;}
.dash-tab{flex:1;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;font:inherit;display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 4px;position:relative;color:#5b7488;}
.dash-tab .dt-n{font-size:17px;font-weight:800;line-height:1;}
.dash-tab .dt-l{font-size:10.5px;font-weight:700;}
.dash-tab.active{color:#1b6ca8;}
.dash-tab.active::before{content:"";position:absolute;top:0;left:24%;right:24%;height:3px;border-radius:0 0 3px 3px;background:#1b6ca8;}
.dash-tab:active{background:rgba(27,108,168,.06);}
</style>
<script>(function(){
var tabs=document.getElementById('dashTabs'); if(!tabs) return;
var panes=document.querySelectorAll('.dash-pane');
tabs.addEventListener('click',function(e){ var b=e.target.closest('.dash-tab'); if(!b) return;
var t=b.getAttribute('data-tab');
for(var i=0;i<panes.length;i++) panes[i].classList.toggle('active', panes[i].getAttribute('data-pane')===t);
var bs=tabs.querySelectorAll('.dash-tab'); for(var j=0;j<bs.length;j++) bs[j].classList.toggle('active', bs[j]===b);
window.scrollTo(0,0);
});
})();</script>
<script>(function(){function go(){var e=document.documentElement,r=e.requestFullscreen||e.webkitRequestFullscreen;if(r){try{r.call(e);}catch(_){}}}document.addEventListener("pointerdown",function f(){document.removeEventListener("pointerdown",f);go();},{passive:true});})();</script><style>
#pwi-ov{position:fixed;inset:0;z-index:9000;display:none;flex-direction:column;align-items:center;justify-content:flex-start;
background:linear-gradient(160deg,#0d2c44 0%,#11436b 60%,#1b6ca8 130%);color:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch;
padding:calc(34px + env(safe-area-inset-top,0px)) 22px calc(28px + env(safe-area-inset-bottom,0px));
font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;}
#pwi-ov.pwi-show{display:flex;}
.pwi-card{width:100%;max-width:430px;margin:auto 0;text-align:center;}
.pwi-icon{width:96px;height:96px;border-radius:22px;box-shadow:0 12px 34px rgba(0,0,0,.32);margin:0 auto 18px;display:block;background:#fff;}
.pwi-name{font-size:25px;font-weight:800;letter-spacing:.2px;}
.pwi-sub{font-size:14.5px;opacity:.82;margin-top:6px;line-height:1.5;}
.pwi-steps{margin:22px 0 6px;text-align:left;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:16px 16px 6px;}
.pwi-step{display:flex;align-items:flex-start;gap:12px;padding:0 0 14px;}
.pwi-num{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:#fff;color:#0d2c44;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.pwi-txt{font-size:14.5px;line-height:1.5;}
.pwi-txt b{font-weight:800;}
.pwi-ic{display:inline-flex;vertical-align:-5px;margin:0 1px;}
.pwi-ic svg{width:19px;height:19px;}
.pwi-install{display:none;width:100%;margin-top:18px;background:#fff;color:#0d2c44;border:0;border-radius:13px;padding:15px;font-size:16px;font-weight:800;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.pwi-install:active{transform:scale(.98);}
.pwi-install.pwi-show{display:block;}
.pwi-cont{display:inline-block;margin-top:18px;color:#cfe2f2;font-size:14px;font-weight:600;text-decoration:underline;cursor:pointer;background:none;border:0;-webkit-tap-highlight-color:transparent;}
.pwi-hint{font-size:12px;opacity:.6;margin-top:14px;}
</style>
<div id="pwi-ov" role="dialog" aria-label="App installieren">
<div class="pwi-card">
<img class="pwi-icon" src="https://seaside.pacim.de/assets/webapp/icon-192.png" alt="" width="96" height="96">
<div class="pwi-name">Seaside Parking</div>
<div class="pwi-sub">Für den schnellsten Zugriff diese App zum Startbildschirm hinzufügen – sie öffnet dann im Vollbild wie eine echte App.</div>
<div class="pwi-steps" id="pwi-ios" style="display:none">
<div class="pwi-step"><span class="pwi-num">1</span><span class="pwi-txt">Unten in der Safari-Leiste auf das <b>Teilen-Symbol</b>
<span class="pwi-ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 16V4M8 8l4-4 4 4"/><path d="M5 12v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6"/></svg></span>
tippen.</span></div>
<div class="pwi-step"><span class="pwi-num">2</span><span class="pwi-txt">Im Menü <b>„Zum Home-Bildschirm"</b> wählen.</span></div>
<div class="pwi-step"><span class="pwi-num">3</span><span class="pwi-txt">Oben rechts auf <b>„Hinzufügen"</b> tippen – fertig.</span></div>
</div>
<div class="pwi-steps" id="pwi-android" style="display:none">
<div class="pwi-step"><span class="pwi-num">1</span><span class="pwi-txt">Oben rechts im Browser auf das <b>Menü</b>
<span class="pwi-ic"><svg viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg></span>
tippen.</span></div>
<div class="pwi-step"><span class="pwi-num">2</span><span class="pwi-txt"><b>„App installieren"</b> bzw. <b>„Zum Startbildschirm hinzufügen"</b> wählen.</span></div>
<div class="pwi-step"><span class="pwi-num">3</span><span class="pwi-txt">Mit <b>„Installieren"</b> bestätigen – fertig.</span></div>
</div>
<div class="pwi-steps" id="pwi-other" style="display:none">
<div class="pwi-step"><span class="pwi-num">1</span><span class="pwi-txt">Im Browser-Menü <b>„Zum Startbildschirm hinzufügen"</b> bzw. <b>„App installieren"</b> wählen.</span></div>
</div>
<button type="button" class="pwi-install" id="pwi-install">App installieren</button>
<br><button type="button" class="pwi-cont" id="pwi-cont">Im Browser fortfahren</button>
<div class="pwi-hint">Diese Anleitung erscheint nur im Browser, nicht in der installierten App.</div>
</div>
</div>
<script>(function(){
var ov=document.getElementById('pwi-ov'); if(!ov) return;
var KEY='pwiSkip';
function standalone(){ return (window.matchMedia&&window.matchMedia('(display-mode: standalone)').matches) || window.navigator.standalone===true; }
function embedded(){ try{ return window.self!==window.top; }catch(e){ return true; } }
var skipped=false; try{ skipped=sessionStorage.getItem(KEY)==='1'; }catch(e){}
if(standalone()||embedded()||skipped) return;
var ua=navigator.userAgent||'';
var isIOS=/iphone|ipad|ipod/i.test(ua) || (navigator.platform==='MacIntel' && navigator.maxTouchPoints>1);
var isAndroid=/android/i.test(ua);
document.getElementById( isIOS?'pwi-ios':(isAndroid?'pwi-android':'pwi-other') ).style.display='block';
// Ein-Tipp-Installation, falls der Browser sie anbietet (Chrome/Edge mit erfüllten Kriterien).
var deferred=null, btn=document.getElementById('pwi-install');
window.addEventListener('beforeinstallprompt', function(e){ e.preventDefault(); deferred=e; if(btn) btn.classList.add('pwi-show'); });
if(btn) btn.addEventListener('click', function(){ if(!deferred) return; deferred.prompt(); deferred.userChoice.then(function(c){ deferred=null; btn.classList.remove('pwi-show'); if(c&&c.outcome==='accepted') hide(); }); });
// Wurde die App während der Sitzung installiert → Overlay weg.
window.addEventListener('appinstalled', function(){ hide(); });
function hide(){ ov.classList.remove('pwi-show'); }
document.getElementById('pwi-cont').addEventListener('click', function(){ try{ sessionStorage.setItem(KEY,'1'); }catch(e){} hide(); });
ov.classList.add('pwi-show');
})();</script>
</body></html>