:root{
--navy-950:#070c18;
--navy-900:#0b1526;
--navy-800:#101f38;
--navy-700:#16294a;
--sky-500:#2e7ff0;
--sky-400:#5b9dff;
--amber-400:#ffb020;
--green-500:#2bd576;
--green-700:#12833f;
--red-500:#ff4f5e;
--red-700:#9b1c28;
--fog:#c9d6ef;
--white:#f4f7fd;
--line: rgba(201,214,239,0.14);
/* Default (non-Arabic) typography — Inter for both body and headings.
Client's explicit call (2026-09 design pass): use Inter across the
whole site rather than splitting headings/body between two families,
to keep the design as consistent as possible. Replaces the earlier
Poppins-everywhere choice. */
--font-body:'Inter', sans-serif;
--font-heading:'Inter', sans-serif;
}
/* When the visitor switches to Arabic, lang/i18n.js sets
— swap both roles to a classic Naskh-style Arabic font (Amiri) instead of
Poppins, which has no Arabic characters at all. Every other language
keeps the fonts above untouched. */
html[lang="ar"]{
--font-body:'Amiri', 'Traditional Arabic', serif;
--font-heading:'Amiri', 'Traditional Arabic', serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
/* Base text size raised from the browser default (16px) so body copy reads
larger throughout the site and admin panel — client request, bumped up
twice now (was 16px, then 17.5px). Everything else is sized in rem, so
this one change scales the whole page — every paragraph, chip, button
and label gets bigger from this single number, not just headings. */
html{ font-size:19px; }
/* Both public/index.html and admin/index.html re-theme this file's colors to
a light sky-blue look (see the ":root{...}" override blocks in each of
those pages) — the site is effectively always light now, never dark.
Without telling the browser that explicitly, a phone/computer set to
system Dark Mode can still paint native form-control chrome (input
backgrounds, autofill highlighting, the text cursor) using its own dark
heuristics on top of our colors, which is exactly what makes a field look
"invisible" — light text the browser assumes is safe on a dark control,
sitting on our light, custom background. Declaring color-scheme:light
tells every browser this page is light-only, so it always uses light
native form-control colors, no matter the device's system theme. */
html{ color-scheme: light; }
html,body{background:var(--navy-950); color:var(--white); font-family:var(--font-body); overflow-x:hidden; width:100%;}
::selection{background:var(--sky-500); color:#fff;}
body{position:relative; min-height:100vh;}
/* Gentle fade/slide-up the first time a section scrolls into view (app.js
toggles .is-visible via IntersectionObserver) — subtle "alive" feel while
scrolling, per client request. */
.reveal-on-scroll{
opacity:0; transform:translateY(28px);
transition:opacity .7s ease, transform .7s ease;
}
.reveal-on-scroll.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
.reveal-on-scroll{ opacity:1; transform:none; transition:none; }
}
/* ---------- background runway texture ---------- */
.sky-bg{
/* z-index:-1 (not 0) is deliberate: a positioned element at z-index:0 still
paints ABOVE plain, non-positioned page content (e.g. the admin login
box, which has no position/z-index of its own) per normal CSS stacking
rules — that hid the login form behind this decorative background
entirely. -1 keeps it behind all normal content everywhere. */
position:fixed; inset:0; z-index:-1; pointer-events:none;
background:
radial-gradient(ellipse 60% 40% at 50% 0%, rgba(46,127,240,0.16), transparent 60%),
radial-gradient(ellipse 50% 30% at 80% 100%, rgba(255,176,32,0.06), transparent 60%),
var(--navy-950);
}
.sky-bg::before{
content:"";
position:absolute; inset:0;
background-image: radial-gradient(rgba(201,214,239,0.35) 1px, transparent 1px);
background-size: 3px 3px;
opacity:.05;
}
/* Faint ambient margin decoration (plane, "P" watermarks, dots, glow rings) —
see .bg-decor-layer in index.html. Fixed to the viewport, hidden on
narrow screens where there's no side margin for them to live in anyway.
Kept very low-opacity by design: this is meant to read as a light
texture in the margins, not a graphic that competes with the real
content.
z-index:0 (NOT -1, unlike .sky-bg): every real section on this page is
itself position:relative or isolation:isolate, so it always paints above
this regardless of z-index — but a negative z-index here made the whole
layer invisible outright the moment any position:relative element
existed elsewhere on the page (a genuine browser stacking/compositing
quirk with negative-z-index fixed elements, confirmed by testing it in
isolation — not specific to one browser or to Playwright). 0 is what
actually renders reliably. */
.bg-decor-layer{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.bg-decor{ display:none; position:absolute; color:var(--sky-500); pointer-events:none; user-select:none; }
@media (min-width:1200px){
.bg-decor{ display:block; }
.bg-plane{ top:10%; right:3.5%; font-size:2.8rem; opacity:.20; transform:rotate(35deg); }
.bg-p{ font-family:var(--font-heading); font-weight:900; line-height:1; opacity:.09; }
.bg-p-1{ left:2%; top:48%; font-size:9rem; }
.bg-p-2{ right:1.5%; top:78%; font-size:6.5rem; }
.bg-dot{ border-radius:50%; background:var(--sky-400); opacity:.55; }
.bg-dot-1{ left:4.5%; top:28%; width:9px; height:9px; }
.bg-dot-2{ right:5%; top:63%; width:7px; height:7px; }
.bg-ring{ border-radius:50%; border:2px solid var(--sky-400); opacity:.30; }
.bg-ring-1{ left:1%; top:16%; width:70px; height:70px; }
.bg-ring-2{ right:2%; top:38%; width:46px; height:46px; }
}
/* ---------- gate intro: real photo, 3D split-open ----------
A photo of a real aircraft holds on screen, then splits down the middle
and rotates open in 3D to reveal the site. Retimed 2026-09, shortened
again per direct client feedback to a ~2-second opening, then shortened
once more (same feedback round) to a snappier ~1.05s total (0.45s hold
+ 0.6s split-open — see runGateIntro() in app.js and .fuse-half's
transition below), with a bright seam flash at the split for a nicer
moment. Never shows a plain dark screen: the
photo fills the overlay from the very first frame (no dark countdown
hold beforehand), and the dark vignette over it is much lighter than
before.
Technique: each half (.fuse-half) is 50% of the viewport with
overflow:hidden; inside it, .fuse-slot is 200% wide (= full viewport
width again) anchored to the outer edge, so the same full-width photo
lines up seamlessly across both halves while each half only shows its
own side of it. */
#gate{
position:fixed; inset:0; z-index:1000;
pointer-events:none;
/* Fixed sky-blue-gray (sampled from gate-plane.jpg's own sky-heavy upper
region), NOT a theme variable — this used to be var(--navy-900), which
was dark navy under the site's old dark theme but silently became pure
white (#fff) once the site moved to its current light theme, so the
brief instant before the photo paints was flashing a plain white
screen instead of blending in. A fixed color tied to the photo itself
can't break again if the theme changes. See also: app.js now waits for
the photo to actually finish loading before starting the split-open
timers, so this color is only ever visible for a very short, load-time
window instead of standing in for a late photo. */
background:#8294af;
}
#gate.hidden{ display:none; }
.plane-stage{ position:absolute; inset:0; z-index:2; perspective:1800px; }
.fuse-half{
position:absolute; top:0; bottom:0; width:50%; overflow:hidden;
transform-style:preserve-3d;
/* Retimed again 2026-09 per direct client feedback asking for the
fastest clean version — down from the ~2.0s round (0.8s hold + 0.9s
open) to ~1.05s total: ~0.45s hold (app.js) + this 0.6s split-open,
with the gate removed the instant this transition actually finishes
(via transitionend in app.js, not a guessed timer — see the notes
there). Same cubic-bezier(0.22,1,0.36,1) easing, just compressed.
Opacity fade lands exactly as the transform finishes (delay +
duration = 0.6s). */
transition: transform .6s cubic-bezier(.22,1,.36,1), opacity .3s ease .3s;
}
.fuse-half.left{ left:0; transform-origin:0% 50%; }
.fuse-half.right{ right:0; transform-origin:100% 50%; }
/* Slight scale added on top of the rotate (client asked for the opening
moment itself to feel more alive, not just fast) — each half puffs out
a touch as it swings away instead of rotating at a flat 1:1 scale. */
.plane-stage.open .fuse-half.left{ transform:rotateY(-108deg) scale(1.06); opacity:0; }
.plane-stage.open .fuse-half.right{ transform:rotateY(108deg) scale(1.06); opacity:0; }
.fuse-slot{ position:absolute; top:0; bottom:0; width:200%; }
.fuse-half.left .fuse-slot{ left:0; }
.fuse-half.right .fuse-slot{ right:0; }
.photo-img{
position:absolute; inset:0;
background-image:url('assets/img/gate-plane.jpg');
background-size:cover; background-position:center 42%;
}
.photo-vignette{
position:absolute; inset:0;
/* Roughly half as dark as the original version — the photo itself should
read clearly, not as a dark/black shape. */
background:
linear-gradient(180deg, rgba(3,6,14,.25) 0%, rgba(3,6,14,.02) 26%, rgba(3,6,14,.02) 62%, rgba(3,6,14,.32) 100%),
linear-gradient(90deg, rgba(3,6,14,.16), transparent 18%, transparent 82%, rgba(3,6,14,.16));
}
.seam{
position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; z-index:3;
background:linear-gradient(180deg, transparent, var(--sky-400), transparent);
box-shadow:0 0 18px 2px rgba(46,127,240,.6);
transition:opacity .3s ease;
}
/* A quick bright flash right as the gate splits open, instead of just
quietly fading out — a small "nice effect" moment for the split itself. */
@keyframes seamFlash{
0%{ opacity:1; box-shadow:0 0 18px 2px rgba(46,127,240,.6); }
35%{ opacity:1; box-shadow:0 0 38px 8px rgba(91,157,255,.95); }
100%{ opacity:0; box-shadow:0 0 18px 2px rgba(46,127,240,.6); }
}
.seam.flash{ animation:seamFlash .35s ease forwards; }
.gate-hud{
position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
text-align:center; pointer-events:none; transition:opacity .3s ease; padding-bottom:9%;
text-shadow:0 2px 12px rgba(0,0,0,.75);
}
.gate-hud .hud-eyebrow{ font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.14em; color:var(--fog); }
.gate-hud .hud-word{
font-family:var(--font-heading); font-weight:900; font-size:1.9rem; letter-spacing:.01em; color:#fff;
margin-top:.4rem; position:relative; display:inline-block; padding-bottom:.6rem;
}
.gate-hud .hud-word span{ color:var(--sky-400); text-shadow:0 0 18px rgba(91,157,255,.65); }
.gate-hud .hud-word::after{
content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
width:56px; height:2px; background:linear-gradient(90deg, transparent, var(--amber-400), transparent);
}
.gate-hud.fade{ opacity:0; }
@media (prefers-reduced-motion: reduce){
.fuse-half{ transition: transform .01s linear, opacity .3s ease; }
.plane-stage.open .fuse-half.left{ transform:translateX(-6%); }
.plane-stage.open .fuse-half.right{ transform:translateX(6%); }
}
/* ---------- nav ---------- */
header{
position:sticky; top:0; z-index:100;
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.7rem;
padding:1.1rem 1.4rem;
background:rgba(7,12,24,0.72); backdrop-filter:blur(14px);
border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit; cursor:pointer; }
.brand svg{ width:34px; height:34px; }
.brand .name{ font-family:var(--font-heading); font-weight:900; font-size:1.15rem; letter-spacing:.02em;}
.brand .name b{ color:var(--sky-400); }
.brand .name small{ display:block; font-family:'JetBrains Mono',monospace; font-weight:400; font-size:.55rem; letter-spacing:.28em; color:var(--fog); opacity:.6;}
.admin-btn{
border:1px solid var(--line); background:transparent; color:var(--fog);
font-family:var(--font-body); font-size:.8rem; padding:.55rem 1rem; border-radius:999px;
cursor:pointer; display:flex; align-items:center; gap:.4rem; transition:.2s;
}
.admin-btn:hover{ border-color:var(--sky-500); color:var(--white); }
/* ---------- hero ---------- */
main{ position:relative; z-index:1; }
.hero{ padding:4.2rem 1.4rem 2.5rem; text-align:center; }
.eyebrow{
font-family:'JetBrains Mono',monospace; font-weight:700; font-size:.82rem; letter-spacing:.22em; color:var(--amber-400);
display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1.1rem;
}
.eyebrow::before, .eyebrow::after{ content:""; width:22px; height:1px; background:var(--amber-400); opacity:.5;}
h1{
/* Tightened from clamp(1.9rem,6.2vw,3.05rem) — 2026-09 design pass calls
for a smaller, tighter H1 (roughly 29-36px on phones up to 42-50px on
desktop) and tighter tracking (-.02em vs the old -.01em). */
font-family:var(--font-heading); font-weight:900; font-size:clamp(1.7rem,5.5vw,2.7rem);
line-height:1.18; letter-spacing:-.02em;
}
h1 span.accent{ color:var(--sky-400); }
.hero p.lead{ color:var(--fog); max-width:36rem; margin:1rem auto 0; font-size:1.05rem; font-weight:500; line-height:1.8;}
.hero-actions{ display:flex; gap:.8rem; justify-content:center; margin-top:1.8rem; flex-wrap:wrap;}
.btn{
font-family:var(--font-body); font-weight:700; font-size:.85rem; padding:.9rem 1.6rem; border-radius:12px; border:none; cursor:pointer; transition:.2s;
}
/* Shadow softened (2026-09 design pass) from a glowy 0 8px 24px -8px rgba(...,.6)
to a gentler, more "premium" ambient shadow per spec; :active press state
added so the button gives clear tactile feedback on tap/click. */
/* Gradient instead of a flat fill — small touch, but it's the button
people press most often, so it's worth a bit of extra "life" (client
feedback: the site felt flat, wanted more color/gradient). */
.btn-primary{ background:linear-gradient(135deg, var(--sky-500), var(--sky-400)); color:#fff; box-shadow:0 8px 22px rgba(46,127,240,.18);}
.btn-primary:hover{ background:linear-gradient(135deg, var(--sky-400), var(--sky-500)); transform:translateY(-1px); }
.btn:active{ transform:scale(.98); }
.btn-ghost{ background:transparent; border:1px solid var(--line); color:var(--fog); }
.btn-ghost:hover{ border-color:var(--fog); color:#fff;}
.stat-row{ display:flex; justify-content:center; gap:2.2rem; margin-top:2.6rem; flex-wrap:wrap;}
.stat{ text-align:center; }
.stat b{ display:block; font-family:var(--font-heading); font-size:1.6rem; color:var(--white); }
.stat span{ font-size:.72rem; color:var(--fog); letter-spacing:.05em;}
/* ---------- address / info section ---------- */
.info-grid{ display:grid; gap:1rem; padding:0 1.2rem 3rem; max-width:920px; margin:0 auto; grid-template-columns:1fr;}
@media(min-width:720px){ .info-grid{ grid-template-columns:1.3fr 1fr; } }
.card{ background:var(--navy-800); border:1px solid var(--line); border-radius:16px; padding:1.5rem; transition:transform .25s ease, box-shadow .25s ease; }
.card:hover{ transform:translateY(-3px); }
.card h3{
font-family:var(--font-heading); font-size:1.3rem; font-weight:800; letter-spacing:-.01em;
color:var(--sky-500);
margin-bottom:.8rem; display:flex; align-items:center; gap:.5rem;
}
.card p{ color:var(--fog); font-size:.88rem; line-height:1.85; }
.address-line{ font-family:'JetBrains Mono',monospace; font-size:.85rem; color:var(--white); background:var(--navy-900); border:1px dashed var(--line); border-radius:10px; padding:.8rem 1rem; margin-top:.7rem;}
.chip-row{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem;}
.chip{ font-size:.72rem; padding:.4rem .8rem; border-radius:999px; background:var(--navy-900); border:1px solid var(--line); color:var(--fog);}
/* ---------- footer: brand + quick links + contact + payment methods ----------
Structure asked for by the client to match a competitor's fuller footer
(colors/logo/content stay ours) — makes the page read as a complete,
"finished" site instead of stopping abruptly after the FAQ. */
footer{ border-top:1px solid var(--line); padding:2.6rem 1.4rem 1.4rem; color:var(--fog); font-size:.85rem; margin-top:1rem; }
footer a{ color:inherit; text-decoration:none; }
.footer-inner{ max-width:1080px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:2.2rem; }
@media(min-width:760px){ .footer-inner{ grid-template-columns:1.3fr 1fr 1fr 1fr; } }
.footer-col h4{
font-family:var(--font-heading); font-size:.92rem; margin-bottom:1rem; color:var(--white);
letter-spacing:.02em;
}
.footer-col a, .footer-col div{ display:block; margin-bottom:.65rem; font-size:.84rem; }
.footer-col a:hover{ color:var(--sky-400); }
.footer-tagline{ font-size:.84rem; line-height:1.7; margin:.9rem 0 1.1rem; }
.footer-bottom{
max-width:1080px; margin:2.2rem auto 0; padding-top:1.4rem; border-top:1px solid var(--line);
text-align:center; font-size:.78rem;
}
.footer-bottom .admin-link{ margin-inline-start:.8rem; opacity:.7; }
.footer-bottom .admin-link:hover{ opacity:1; }
/* ---------- social / review icon links (footer) ---------- */
.social-links{ display:flex; gap:.7rem; margin-top:.2rem; }
.social-links:empty{ display:none; }
.social-links a{
width:38px; height:38px; border-radius:50%; background:var(--navy-800); border:1px solid var(--line);
display:flex; align-items:center; justify-content:center; color:var(--fog); transition:.15s;
}
.social-links a:hover{ border-color:var(--sky-500); color:#fff; background:rgba(46,127,240,.12); }
.social-links a svg{ width:18px; height:18px; fill:currentColor; }
/* ---------- payment method badges (footer) ----------
Simple flat wordmark/shape badges for the payment brands we actually
support — not traced logos, just clean recognizable colored chips, the
same way any checkout page indicates accepted payment methods. Only
methods this site genuinely offers are shown (see api/create_booking.php
/ the payment step) — no Apple Pay etc., since that isn't wired up. */
.payment-badges{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.2rem; }
.pay-badge{
display:inline-flex; align-items:center; gap:.35rem; padding:.5rem .8rem; border-radius:8px;
font-size:.74rem; font-weight:800; background:#fff; line-height:1;
}
.pay-paypal{ color:#003087; font-style:italic; }
.pay-visa{ color:#1a1f71; letter-spacing:.04em; }
.pay-mastercard{ padding:.5rem .65rem; }
.pay-mastercard i{ display:inline-block; width:15px; height:15px; border-radius:50%; font-style:normal; }
.pay-mastercard i:first-child{ background:#eb001b; margin-inline-end:-6px; }
.pay-mastercard i:last-child{ background:#f79e1b; opacity:.9; }
.pay-cash{ background:var(--navy-800); border:1px solid var(--line); color:var(--fog); font-weight:600; }
/* ---------- photo gallery carousel ---------- */
.gallery-section{ max-width:920px; margin:0 auto; padding:0 1.2rem 3rem; }
.gallery-section h3{ font-family:var(--font-heading); font-size:1.05rem; margin-bottom:.9rem; }
.gallery-carousel{ position:relative; border-radius:16px; overflow:hidden; background:var(--navy-800); border:1px solid var(--line); aspect-ratio:16/9; }
.gallery-track{ position:relative; width:100%; height:100%; }
.gallery-slide{ position:absolute; inset:0; opacity:0; transition:opacity .6s ease; }
.gallery-slide.active{ opacity:1; }
.gallery-slide img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1); }
/* Slow "Ken Burns" drift on whichever photo is currently showing — same idea
as the hero photo's animation, so the gallery feels just as alive once
real photos are uploaded (Admin > Bildergalerie). */
.gallery-slide.active img{ animation:galleryKenBurns 5s ease-out forwards; }
@keyframes galleryKenBurns{
from{ transform:scale(1); }
to{ transform:scale(1.09); }
}
@media (prefers-reduced-motion: reduce){
.gallery-slide.active img{ animation:none; }
}
.gallery-arrow{
position:absolute; top:50%; transform:translateY(-50%); z-index:2;
width:36px; height:36px; border-radius:50%; border:none; cursor:pointer;
background:rgba(11,26,72,.45); color:#fff; font-size:1.3rem; line-height:1;
display:flex; align-items:center; justify-content:center;
}
.gallery-arrow:hover{ background:rgba(11,26,72,.7); }
.gallery-arrow.prev{ left:.7rem; }
.gallery-arrow.next{ right:.7rem; }
.gallery-dots{ position:absolute; bottom:.8rem; left:0; right:0; display:flex; justify-content:center; gap:.4rem; z-index:2; }
.gallery-dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; border:none; padding:0; }
.gallery-dot.active{ background:#fff; width:18px; border-radius:4px; transition:width .2s ease; }
/* ---------- modal shared ---------- */
.overlay{ position:fixed; inset:0; background:rgba(3,6,12,.72); backdrop-filter:blur(6px); z-index:200; display:none; align-items:flex-start; justify-content:center; padding:1.4rem; overflow-y:auto;}
.overlay.show{ display:flex; }
.modal{ background:var(--navy-900); border:1px solid var(--line); border-radius:20px; width:100%; max-width:460px; margin-top:1rem; overflow:hidden; animation:pop .25s ease;}
@keyframes pop{ from{ opacity:0; transform:translateY(12px) scale(.98);} to{opacity:1; transform:none;} }
.modal-head{ padding:1.2rem 1.4rem; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center;}
.modal-head h3{ font-family:var(--font-heading); font-size:1.05rem;}
.modal-close{ background:none; border:none; color:var(--fog); font-size:1.1rem; cursor:pointer; }
.modal-body{ padding:1.3rem 1.4rem 1.6rem; }
.field{ margin-bottom:.9rem; }
.field label{ display:block; font-size:.76rem; color:var(--fog); margin-bottom:.4rem;}
.field input, .field select{
width:100%; background:var(--navy-800); border:1px solid var(--line); color:var(--white);
padding:.7rem .8rem; border-radius:10px; font-family:var(--font-body); font-size:.88rem;
}
.field input:focus, .field select:focus{ outline:none; border-color:var(--sky-500);}
/* Saved-password/autofill safety net: when a browser (mobile Safari and
Chrome both do this) fills in a saved username/password, it paints its
own background behind the text and can keep that background even though
our CSS still owns the text color — on a login field that combination
can render as unreadable. Forcing both back to our own colors, with a
very long background-color transition (a standard trick), makes autofill
visually match a normal, hand-typed field instead of overriding it. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus{
-webkit-text-fill-color: var(--white);
-webkit-box-shadow: 0 0 0px 1000px var(--navy-800) inset;
box-shadow: 0 0 0px 1000px var(--navy-800) inset;
caret-color: var(--white);
transition: background-color 5000s ease-in-out 0s;
}
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem;}
/* Grid tracks default to minmax(auto,1fr) — a native date/time 's
own intrinsic content width (esp. on iOS Safari) can be wider than a
true 50% share, which stretched that column past the other one and
pushed it outside the modal instead of splitting evenly. min-width:0
on the grid item lets it actually shrink to the track width, so both
columns end up equal and nothing overflows the card. */
.row2 > .field{ min-width:0; }
.row2 > .field input{ min-width:0; }
.pay-tabs{ display:flex; gap:.5rem; margin-bottom:1rem; }
.pay-tab{ flex:1; padding:.7rem; border-radius:10px; border:1px solid var(--line); background:var(--navy-800); color:var(--fog); text-align:center; font-size:.82rem; cursor:pointer; transition:.15s;}
.pay-tab.active{ border-color:var(--sky-500); color:#fff; background:rgba(46,127,240,.12);}
.pay-panel{ display:none; }
.pay-panel.active{ display:block; }
.total-line{ display:flex; justify-content:space-between; font-family:'JetBrains Mono',monospace; font-size:.85rem; color:var(--fog); padding-top:.8rem; border-top:1px solid var(--line); margin-top:.4rem;}
.total-line b{ color:var(--white); font-size:1.1rem;}
/* ---------- invoice ---------- */
.invoice{ text-align:center; }
.invoice .ok{ width:52px; height:52px; border-radius:50%; background:rgba(43,213,118,.15); color:var(--green-500); display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; font-size:1.4rem;}
.invoice h4{ font-family:var(--font-heading); font-size:1.1rem; margin-bottom:.3rem;}
.invoice .ref{ font-family:'JetBrains Mono',monospace; color:var(--sky-400); font-size:.95rem; letter-spacing:.05em; margin-bottom:1rem;}
#qrcode{ display:flex; justify-content:center; margin:1rem 0; padding:.8rem; background:#fff; border-radius:12px; width:fit-content; margin-inline:auto;}
.mail-note{ font-size:.78rem; color:var(--fog); background:var(--navy-800); border:1px dashed var(--line); border-radius:10px; padding:.7rem; margin-top:1rem;}
/* ---------- toast ---------- */
.toast{ position:fixed; bottom:1.4rem; left:50%; transform:translateX(-50%) translateY(140%); background:var(--navy-800); border:1px solid var(--sky-500); color:#fff; padding:.8rem 1.3rem; border-radius:12px; font-size:.85rem; z-index:400; transition:transform .3s ease; box-shadow:0 10px 30px rgba(0,0,0,.4);}
.toast.show{ transform:translateX(-50%) translateY(0); }
/* ---------- admin ---------- */
#admin{ position:fixed; inset:0; background:var(--navy-950); z-index:300; display:none; overflow-y:auto;}
#admin.show{ display:block; }
.admin-top{ position:sticky; top:0; background:rgba(7,12,24,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding:1rem 1.2rem; display:flex; justify-content:space-between; align-items:center; z-index:5;}
.admin-top h2{ font-family:var(--font-heading); font-size:1.1rem; display:flex; align-items:center; gap:.5rem;}
.admin-tabs{ display:flex; gap:.4rem; padding:1rem 1.2rem 0; flex-wrap:wrap;}
.admin-tab{ padding:.55rem 1rem; border-radius:10px; font-size:.82rem; color:var(--fog); background:var(--navy-800); border:1px solid var(--line); cursor:pointer;}
.admin-tab.active{ color:#fff; border-color:var(--sky-500); background:rgba(46,127,240,.12);}
.admin-panel{ display:none; padding:1.2rem; max-width:760px; margin:0 auto;}
.admin-panel.active{ display:block; }
.settings-form .field{ max-width:520px; }
.save-bar{ display:flex; gap:.6rem; margin-top:1rem;}
.booking-row{ background:var(--navy-800); border:1px solid var(--line); border-radius:14px; padding:1rem 1.1rem; margin-bottom:.7rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; align-items:center;}
.booking-row .meta b{ font-family:'JetBrains Mono',monospace; font-size:.85rem; color:var(--sky-400);}
.booking-row .meta div{ font-size:.8rem; color:var(--fog); margin-top:.25rem;}
.status-pill{ font-size:.7rem; padding:.3rem .7rem; border-radius:999px; }
.status-pill.paid{ background:rgba(43,213,118,.15); color:var(--green-500); }
.status-pill.checked{ background:rgba(91,157,255,.15); color:var(--sky-400); }
.mini-btn{ font-size:.75rem; padding:.5rem .8rem; border-radius:8px; border:1px solid var(--line); background:transparent; color:var(--fog); cursor:pointer;}
.mini-btn:hover{ color:#fff; border-color:var(--sky-500);}
.scan-box{ display:flex; gap:.6rem; max-width:420px; margin-bottom:1.4rem;}
.scan-box input{ flex:1; }
.empty-state{ color:var(--fog); font-size:.85rem; text-align:center; padding:2rem 0; border:1px dashed var(--line); border-radius:12px;}
/* ---------- trust bar ---------- */
.trust-bar{
display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem;
max-width:1080px; margin:1.4rem auto 0; padding:0 1.2rem;
}
@media(min-width:720px){ .trust-bar{ grid-template-columns:repeat(4,1fr); } }
.trust-item{
display:flex; align-items:center; gap:.55rem; background:var(--navy-900);
border:1px solid var(--line); border-radius:12px; padding:.8rem .9rem;
font-size:.78rem; color:var(--fog);
}
.trust-icon{ font-size:1.05rem; line-height:1; flex-shrink:0; }
/* ---------- "Auf einen Blick" quick-stats strip ----------
Numbers count up from 0 to their real value the first time this section
scrolls into view (setupStatCounters() in app.js) — the lively "numbers
climbing" effect the client asked for, matching a competitor site. */
.stats-section{ max-width:1080px; margin:1.6rem auto 0; padding:0 1.2rem; }
.stats-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem; }
@media(min-width:720px){ .stats-grid{ grid-template-columns:repeat(4,1fr); } }
.stat-tile{
background:var(--navy-900); border:1px solid var(--line); border-radius:16px;
padding:1.3rem 1rem; text-align:center;
display:flex; flex-direction:column; align-items:center; gap:.3rem;
}
.stat-number{
font-family:var(--font-heading); font-size:clamp(1.8rem, 4vw, 2.4rem);
font-weight:900; color:var(--sky-500); line-height:1;
font-variant-numeric:tabular-nums; /* keeps the tile from jittering in width while the digits climb */
}
.stat-label{ font-size:.78rem; color:var(--fog); line-height:1.4; }
/* ---------- advantages ("Warum Sky Parking?") ---------- */
.advantages-section{ max-width:1080px; margin:2.2rem auto 0; padding:0 1.2rem; }
.advantages-section h3{ font-family:var(--font-heading); font-size:1.1rem; margin-bottom:1rem; }
.adv-grid{ display:grid; grid-template-columns:1fr; gap:.9rem; }
@media(min-width:640px){ .adv-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1000px){ .adv-grid{ grid-template-columns:repeat(4,1fr); } }
.adv-card{
background:var(--navy-900); border:1px solid var(--line); border-radius:16px;
padding:1.2rem; display:flex; flex-direction:column; gap:.45rem;
transition:transform .25s ease, box-shadow .25s ease;
}
.adv-card:hover{ transform:translateY(-3px); }
.adv-icon{ font-size:1.4rem; line-height:1; color:var(--sky-500); display:flex; }
/* Lucide replaces each with an inline