: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 <html lang="ar">
   — 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: simple logo reveal ----------
   2026-09: matches the client's reference design exactly (their own
   #intro/.intro-inner/.intro-logo/.intro-line/.intro-text CSS) — a dark
   navy panel, "Sky Parking" fades + rises in over 1.1s, its underline bar
   grows in just after (.35s delay, 1s), holds until 2.5s total, then the
   whole panel fades out over 1s (see runGateIntro() in app.js for the
   timing). Colors are hardcoded to match that design rather than pulled
   from the page's own (light-theme) variables on purpose — same reason
   the previous version of this comment already explained: this panel is
   its own fixed dark backdrop, independent of whatever theme the rest of
   the page is running. */
#gate{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  /* "Ocean Blue" treatment (client-picked, 2026-09, from a 3-option
     comparison) — a radial navy gradient instead of a flat color, so the
     pulsing glow and the wordmark both have real depth behind them. */
  background:radial-gradient(ellipse 90% 70% at 50% 40%, #0f2a4d 0%, #081726 70%);
  transition:opacity 1s ease;
  overflow:hidden;
}
#gate.fade{ opacity:0; }
#gate.hidden{ display:none; }

/* Soft breathing glow behind the wordmark — purely decorative, sits under
   .gate-hud (z-index below it) and never intercepts clicks (#gate itself
   is already pointer-events:none). */
.gate-glow{
  position:absolute; width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle, rgba(56,189,248,.35), transparent 70%);
  top:50%; left:50%; transform:translate(-50%,-50%);
  animation:gateGlowPulse 3s ease-in-out infinite;
}
@keyframes gateGlowPulse{
  0%,100%{ opacity:.5; transform:translate(-50%,-50%) scale(.9); }
  50%{ opacity:1; transform:translate(-50%,-50%) scale(1.15); }
}

/* Small plane crossing the screen once, timed to arrive mid-hold (starts
   at .8s, finishes well before the 2.5s hold ends) — a one-shot flourish,
   not a loop, so it doesn't compete with the wordmark for attention. */
.gate-plane{
  position:absolute; font-size:26px; top:36%; left:-40px; opacity:0;
  animation:gatePlaneFly 2.4s ease-in .8s forwards;
}
@keyframes gatePlaneFly{
  0%{ left:-40px; opacity:0; transform:rotate(8deg); }
  15%{ opacity:1; }
  85%{ opacity:1; }
  100%{ left:110%; opacity:0; transform:rotate(8deg); }
}

.gate-hud{
  text-align:center; pointer-events:none; position:relative; z-index:2;
  opacity:0; transform:translateY(20px) scale(.97);
  transition:opacity 1.1s ease, transform 1.1s ease;
}
.gate-hud.in{ opacity:1; transform:none; }
.gate-hud .hud-word{
  font-family:var(--font-heading); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(42px,8vw,82px); line-height:1; color:#fff;
}
.gate-hud .hud-word span{ color:#38bdf8; }
.gate-hud .hud-line{
  height:2px; width:0; margin:18px auto 14px;
  background:linear-gradient(90deg, transparent, #38bdf8, transparent);
  transition:width 1s ease .35s;
}
.gate-hud.in .hud-line{ width:170px; }
.gate-hud .hud-eyebrow{
  font-family:'Inter',sans-serif; font-size:15px; letter-spacing:4px;
  text-transform:uppercase; color:#bcdcff;
}

/* The reference design skips the intro entirely for reduced motion (no
   fast fallback version) — matched exactly here rather than substituting
   our own shortened-timing convention used elsewhere on the site. */
@media (prefers-reduced-motion: reduce){
  #gate{ display:none; }
}

/* ---------- 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; }

/* Impressum / Datenschutz links — deliberately NOT the muted --fog color
   every other footer link/text uses (added 2026-09-26, client request):
   these two need to visibly stand out as clickable, not blend into the
   surrounding copy. Sits right under Zahlungsmethoden — see index.html. */
.legal-links{ display:flex; gap:1.1rem; margin-top:1rem; }
.legal-links a{ color:var(--white); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.legal-links a:hover{ color:var(--sky-400); }

/* ---------- 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 <input>'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 <i data-lucide="..."> with an inline <svg> (see the
   lucide.createIcons() call in index.html) — size it off currentColor/em so
   it always matches whatever font-size/color context it's dropped into,
   the same way the emoji it replaced used to. */
.adv-icon svg, .contact-icon svg{ width:1em; height:1em; stroke-width:2.1; }
.adv-title{
  font-family:var(--font-heading); font-size:1.15rem; font-weight:800; letter-spacing:-.01em;
  color:var(--sky-500);
}
.adv-text{ font-size:.82rem; color:var(--fog); line-height:1.6; }

/* ---------- customer testimonials ---------- */
.reviews-section{ max-width:1080px; margin:2.2rem auto 0; padding:1.4rem 1.2rem; position:relative; overflow:hidden; border-radius:24px; background:radial-gradient(ellipse at 8% 5%,rgba(66,133,244,.18),transparent 38%),radial-gradient(ellipse at 95% 100%,rgba(52,168,83,.13),transparent 34%),var(--navy-950); border:1px solid rgba(66,133,244,.2); }
.reviews-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}.reviews-section h3{ font-family:var(--font-heading); font-size:1.35rem; margin:.3rem 0 0; }.google-kicker{font-size:.66rem;font-weight:800;letter-spacing:.13em;color:var(--fog)}.google-kicker b{font-size:1rem;font-weight:900;background:conic-gradient(from -45deg,#4285f4 0 25%,#34a853 25% 50%,#fbbc05 50% 75%,#ea4335 75%);background-clip:text;-webkit-text-fill-color:transparent;margin-right:.35rem}.google-reviews-link{font-size:.75rem;font-weight:750;color:#8ab4f8;text-decoration:none;border:1px solid rgba(138,180,248,.35);padding:.6rem .8rem;border-radius:999px}.google-reviews-link:hover{background:rgba(66,133,244,.15)}
.reviews-grid{ display:grid; grid-template-columns:1fr; gap:.9rem; }
@media(min-width:640px){ .reviews-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1000px){ .reviews-grid{ grid-template-columns:repeat(3,1fr); } }
.review-card{
  position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.025)),var(--navy-900); border:1px solid rgba(138,180,248,.18); border-radius:18px;
  padding:1.2rem; display:flex; flex-direction:column; gap:.65rem;min-height:190px;
  transition:transform .45s ease, box-shadow .45s ease,border-color .45s ease;animation:reviewEnter .65s both;animation-delay:var(--review-delay,0ms)
}
.review-card::after{content:"";position:absolute;width:140px;height:140px;border-radius:50%;right:-72px;top:-82px;background:radial-gradient(circle,rgba(66,133,244,.22),transparent 70%);pointer-events:none}.review-card:hover,.review-card.is-active{transform:translateY(-5px);border-color:rgba(138,180,248,.48);box-shadow:0 18px 42px rgba(0,0,0,.24),0 0 30px rgba(66,133,244,.11)}
.review-person{display:flex;align-items:center;gap:.7rem}.review-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;background:linear-gradient(135deg,#4285f4,#34a853);color:white;font-weight:850;font-size:.82rem;box-shadow:0 5px 14px #0003}.review-google-g{margin-left:auto;font-weight:900;font-size:1.15rem;background:conic-gradient(from -45deg,#4285f4 0 25%,#34a853 25% 50%,#fbbc05 50% 75%,#ea4335 75%);background-clip:text;-webkit-text-fill-color:transparent}.review-source{font-size:.68rem;color:#8ab4f8;text-decoration:none}.review-source:hover{text-decoration:underline}
.review-avatar-photo{object-fit:cover}.review-api-attributions{font-size:.68rem;line-height:1.5;color:var(--fog);opacity:.8;margin-top:.7rem}
.review-stars{ color:var(--amber-400); font-size:.9rem; letter-spacing:.1em; }
.review-quote{ font-size:.85rem; color:var(--fog); line-height:1.7; flex:1; }
.review-name{ font-size:.8rem; color:var(--white); font-family:var(--font-heading); }
@keyframes reviewEnter{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.review-card{animation:none!important;transition:none!important}}

/* ---------- FAQ ---------- */
.faq-section{ max-width:920px; margin:2.2rem auto 0; padding:0 1.2rem; }
.faq-section h3{ font-family:var(--font-heading); font-size:1.1rem; margin-bottom:1rem; }
.faq-list{ display:flex; flex-direction:column; gap:.6rem; }
.faq-item{
  background:var(--navy-900); border:1px solid var(--line); border-radius:12px;
  padding:.2rem .9rem;
}
.faq-item summary{
  cursor:pointer; padding:.85rem 0; font-size:.9rem; color:var(--white);
  font-family:var(--font-heading); list-style:none; display:flex; align-items:center;
  justify-content:space-between; gap:.6rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-size:1.2rem; color:var(--sky-400); flex-shrink:0;
  transition:transform .2s ease;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ font-size:.82rem; color:var(--fog); line-height:1.7; padding:0 0 .95rem; margin:0; }

/* ---------- about us ---------- */
.about-section{ max-width:920px; margin:2.4rem auto 0; padding:0 1.2rem; }
.about-section h3{ font-family:var(--font-heading); font-size:1.1rem; margin-bottom:.9rem; }
.about-text{ color:var(--fog); font-size:.92rem; line-height:1.8; margin-bottom:1.1rem; }
.about-highlights{
  display:grid; grid-template-columns:1fr; gap:.7rem;
}
@media(min-width:720px){ .about-highlights{ grid-template-columns:repeat(3,1fr); } }
.about-highlight{
  display:flex; align-items:center; gap:.55rem; background:var(--navy-900);
  border:1px solid var(--line); border-radius:12px; padding:.8rem .9rem;
  font-size:.82rem; color:var(--white);
}

/* ---------- special offers (homepage promo cards) ---------- */
.offers-section{ max-width:1080px; margin:2.2rem auto 0; padding:0 1.2rem; }
.offers-section h3{ font-family:var(--font-heading); font-size:1.1rem; margin-bottom:1rem; }

/* Section titles ("Warum Sky Parking?", "A look at the lot", "What our
   customers say", "FAQ", offers, etc.) bumped bigger + bolder for stronger
   visual hierarchy, per client request — overrides the smaller per-section
   sizes set above (cascade: this block loads after them).
   Round 2 (client asked for bigger still + darker/richer + "more alive"):
   switched the color from plain white to the brand sky-blue — the darker
   --sky-500 shade rather than --sky-400, since a first pass with a big
   soft text-shadow glow looked hazy/washed-out on the light page
   background instead of "darker". Added a small accent bar under each
   title for a bit of visual life. Kept as an inline-block so the bar only
   spans the title's own width, not the full row.
   Round 3 (still "bigger" — client keeps asking): pushed the clamp up
   again, and folded the new standalone map section into the same rule so
   it matches every other section title on the page.
   Round 4 (client asked to actually "shade"/highlight the titles, not
   just color the text): added a soft translucent sky-blue highlighter
   band behind each title, like a marker highlight, plus the new contact
   section joins the same rule. */
.gallery-section h3, .advantages-section h3, .reviews-section h3,
.faq-section h3, .about-section h3, .offers-section h3, .map-section h3,
.contact-section h3{
  /* Lowered from clamp(2.25rem,5.2vw,3.1rem) — that minimum (~42px) was too
     big for one long unbroken word (e.g. "Sonderangebote") on a narrow
     phone screen and pushed the page wider than the viewport. overflow-wrap
     is a safety net on top: even a single word that still doesn't fit will
     now break inside itself instead of overflowing the page. Max further
     tightened (2026-09 design pass) from 3.1rem down to 2.1rem — these
     section titles were noticeably bigger than the spec's ~30-38px target. */
  font-size:clamp(1.58rem, 4vw, 2.1rem);
  overflow-wrap:break-word;
  max-width:100%;
  font-weight:900;
  color:var(--sky-500);
  letter-spacing:.005em;
  margin-bottom:1.5rem;
  display:inline-block;
  position:relative;
  padding:.25rem .8rem;
  border-radius:12px;
  background:linear-gradient(100deg, rgba(46,127,240,.16), rgba(91,157,255,.1));
}
.gallery-section h3::after, .advantages-section h3::after, .reviews-section h3::after,
.faq-section h3::after, .about-section h3::after, .offers-section h3::after,
.map-section h3::after, .contact-section h3::after{
  content:"";
  display:block;
  width:58px; height:4px; margin-top:.55rem;
  border-radius:999px;
  background:linear-gradient(90deg, var(--sky-500), var(--sky-400));
  box-shadow:0 2px 8px rgba(46,127,240,.45);
}
/* On the five dark photo-band sections the title is already overridden to
   white (see the photo-band block below) — the same translucent highlight
   still works there, just with a lighter/whiter tint so it reads as a
   highlight on a dark photo instead of nearly invisible navy-on-navy. */
.card-address h3, .card-payment h3, .advantages-section h3,
.about-section h3, .faq-section h3{
  background:rgba(255,255,255,.16);
}
.offers-grid{ display:grid; grid-template-columns:1fr; gap:.9rem; }
@media(min-width:640px){ .offers-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1000px){ .offers-grid{ grid-template-columns:repeat(4,1fr); } }
.offer-card{
  background:linear-gradient(160deg, rgba(46,127,240,.14), var(--navy-900) 60%);
  border:1px solid rgba(46,127,240,.35); border-radius:16px; padding:1.2rem;
  display:flex; flex-direction:column; gap:.5rem;
  transition:transform .25s ease, box-shadow .25s ease;
}
.offer-card:hover{ transform:translateY(-3px); }
/* Was missing font-weight entirely (fell back to normal/400) while every
   other card-level title on the site is a bold 800 — the inconsistency
   was part of what read as "not quite professional" across the page. */
.offer-card .offer-title{ font-family:var(--font-heading); font-size:1.05rem; font-weight:800; letter-spacing:-.01em; color:#fff; }
.offer-card .offer-sub{ font-size:.78rem; color:var(--fog); }
.offer-card .offer-price{ font-family:'JetBrains Mono',monospace; font-size:1.5rem; color:var(--sky-400); margin-top:.2rem; }
.offer-card .offer-price small{ font-size:.7rem; color:var(--fog); font-family:var(--font-body); }

.offer-card .btn{ margin-top:.5rem; width:100%; padding:.65rem; font-size:.82rem; }


/* ---------- real-photo background bands ----------
   Client asked explicitly for photos behind 5 specific spots: the address
   card (behind the Google map), "Why Sky Parking", the payment card,
   "About us", and the FAQ. Same recipe as the hero: a real photo, a dark
   gradient overlay so text stays readable, light text on top. Each block
   below targets one spot with one real photo (`isolation:isolate` keeps
   the negative z-index photo/overlay layers confined to that element only,
   same as everywhere else this trick is used on this page). White cards
   already inside a section (.adv-card, .faq-item) are left as they are —
   they read fine floating over a dark photo, same as the hero's booking
   box. */
.card-address, .card-payment, .advantages-section, .about-section, .faq-section{
  position:relative; z-index:0; isolation:isolate; overflow:hidden;
  border-radius:20px;
}
.card-address::before, .card-payment::before, .advantages-section::before,
.about-section::before, .faq-section::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
/* Fix (2026-09): these five background-images pointed at
   "../assets/gallery/..." — one directory ABOVE public/, i.e. outside the
   web root. On real hosting (public/ is the document root) that path is
   simply unreachable over HTTP, so all five photos have likely been
   invisible on the live site (just the dark overlay showing, over nothing)
   this whole time. Copied the same files into public/assets/gallery/ and
   pointed every rule at that reachable path — card-payment/about/faq keep
   their original photos, address + advantages get the client's new ones. */
.card-address::before{ background-image:url('assets/gallery/gallery_address_bg.jpg'); }
.card-payment::before{ background-image:url('assets/gallery/gallery_van_tarmac.jpg'); }
.advantages-section::before{ background-image:url('assets/gallery/gallery_advantages_bg.jpg'); }
.about-section::before{ background-image:url('assets/gallery/gallery_van_garage.jpg'); }
.faq-section::before{ background-image:url('assets/gallery/faq-parking.jpg'); }

/* Lighter, blue-tinted overlay (was a near-opaque dark navy) — the photo
   itself should actually be visible/"big" behind the text, not just a
   dark tinted panel, per client request + reference screenshot. Text
   contrast is kept up via a stronger text-shadow and darker chip/pill
   backgrounds below instead of relying on the overlay to do all the work. */
.card-address::after, .card-payment::after, .advantages-section::after,
.about-section::after, .faq-section::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(160deg, rgba(8,18,42,.62), rgba(8,18,42,.38) 55%, rgba(8,18,42,.66));
}
/* Client asked specifically for ~60% photo visibility on these two new
   photos (address card + "why Sky Parking") — noticeably lighter overlay
   than the default above. */
.card-address::after, .advantages-section::after{
  background:linear-gradient(160deg, rgba(8,18,42,.44), rgba(8,18,42,.22) 55%, rgba(8,18,42,.48));
}
.card-address, .card-payment, .advantages-section, .about-section, .faq-section{ padding:2.4rem 1.6rem; }
.card-address, .card-payment{ border-color:rgba(255,255,255,.18); min-height:260px; display:flex; flex-direction:column; justify-content:center; }
.advantages-section, .about-section, .faq-section{ padding:3.2rem 1.8rem; min-height:380px; display:flex; flex-direction:column; justify-content:center; }
.card-address h3, .card-payment h3, .advantages-section h3,
.about-section h3, .faq-section h3{ color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.7), 0 1px 3px rgba(0,0,0,.8); }
.card-address h3::after, .card-payment h3::after, .advantages-section h3::after,
.about-section h3::after, .faq-section h3::after{ background:linear-gradient(90deg, var(--sky-400), #fff); }
.card-address p, .card-payment p, .about-text{ color:#f3f6fc; text-shadow:0 1px 6px rgba(0,0,0,.55); }
.card-address .chip, .card-payment .chip{
  /* Slightly darker/more opaque now that the photo behind it shows through
     more — keeps these pills readable as solid little tags, not just tinted
     glass. */
  background:rgba(6,14,32,.58); border-color:rgba(255,255,255,.35); color:#fff;
}
.card-address .address-line{
  background:rgba(6,14,32,.58); border-color:rgba(255,255,255,.42); color:#fff;
}

/* ---------- map: its own big standalone section ----------
   Was previously squeezed inside the address card at 420px tall; client
   asked for it to be a full section on its own, bigger. Moved out of
   .card-address in index.html (the #mapFrame iframe keeps its id, so
   app.js's getElementById lookups still work unchanged) into this new
   section, sized like the other big sections and given a much taller map. */
/* Wrapped in its own card box (client request: title/map/button were just
   floating on the page background — putting the whole block in a proper
   bordered, padded, shadowed box reads much nicer, matching the other
   cards on the page). */
.map-section{
  position:relative; overflow:hidden;
  max-width:1080px; margin:2.4rem auto 0; padding:1.6rem 1.6rem 1.9rem;
  background:var(--navy-800); border:1px solid var(--line); border-radius:22px;
  box-shadow:0 14px 40px rgba(20,72,135,.07);
}
/* Client-provided Sky-Parking branded photo behind the card content,
   tinted with the card's own surface color so the title/map/button stay
   readable on top, in both the light and dark theme. */
.map-section::before{
  content:''; position:absolute; inset:0;
  background:url('assets/img/map-bg.jpg') center 40%/cover no-repeat;
  opacity:.75; z-index:0;
}
.map-section::after{
  content:''; position:absolute; inset:0;
  background:var(--navy-800); opacity:.3; z-index:0;
}
.map-section > *{ position:relative; z-index:1; }
/* The shared section-title style (translucent sky-blue highlight + sky-blue
   text) reads poorly here now that a bright, busy photo sits behind it —
   give this one title its own solid, high-contrast treatment instead. */
.map-section h3{
  color:#ffffff;
  background:rgba(11,26,72,.62);
  backdrop-filter:blur(2px);
}
.map-section h3::after{ background:#ffffff; }
/* Clean, professional map card — a plain large rounded box with the real
   live Google Maps iframe filling it edge to edge. We tried a decorative
   photo-frame overlay around the map (plane/banner/car-photo graphic with
   a cutout for the live map); the client decided against it — the map
   itself should be as large and clear as possible with no frame graphic
   competing with it, so the "frame" here is just a soft card border and
   shadow, not an image. */
.map-embed{
  width:100%; max-width:1000px; margin:0 auto;
  aspect-ratio:16/9.5;
  border-radius:20px; overflow:hidden;
  border:1px solid var(--line); background:var(--navy-900);
  box-shadow:0 18px 44px rgba(20,72,135,.14);
}
.map-embed iframe{ width:100%; height:100%; border:0; display:block; filter:saturate(1.02); }
/* On phones the 16:9.5 ratio made the map quite short against the card's
   own side padding eating into the available width — give it noticeably
   more vertical room and tighten the card padding so the map itself gets
   almost the full screen width. */
@media(max-width:640px){
  .map-section{ padding:1.2rem .8rem 1.5rem; }
  .map-embed{ aspect-ratio:1/1.15; }
}
.map-directions-btn{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  width:fit-content; text-decoration:none;
}
.map-directions-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.7rem; margin:1rem auto 0;
}

/* ---------- contact us: new closing section ---------- */
.contact-section{ max-width:1080px; margin:2.4rem auto 3rem; padding:0 1.2rem; }
.contact-grid{ display:grid; grid-template-columns:1fr; gap:.9rem; }
@media(min-width:720px){ .contact-grid{ grid-template-columns:repeat(2,1fr); } }
.contact-item{
  display:flex; align-items:center; gap:.8rem; background:var(--navy-900);
  border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.3rem;
  font-size:1rem; color:var(--white);
}
.contact-item a{ color:var(--white); text-decoration:none; }
.contact-item a:hover{ color:var(--sky-400); text-decoration:underline; }
.contact-icon{ font-size:1.4rem; flex-shrink:0; color:var(--sky-500); display:flex; }

.about-highlight{
  background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28);
  color:#fff; backdrop-filter:blur(2px);
}

/* ---------- active-offer banner inside the booking modal ---------- */
.offer-banner{
  display:flex; align-items:center; justify-content:space-between; gap:.7rem;
  background:rgba(46,127,240,.12); border:1px solid rgba(46,127,240,.4); border-radius:10px;
  padding:.7rem .9rem; margin-bottom:.9rem; font-size:.8rem; color:#fff;
}
.offer-banner a{ color:var(--fog); text-decoration:underline; white-space:nowrap; font-size:.75rem; }

/* ---------- discount code ---------- */
.discount-row{ display:flex; gap:.6rem; }
.discount-row input{ flex:1; }
.discount-row .btn{ white-space:nowrap; padding:.7rem 1rem; font-size:.82rem; }
.discount-msg{ font-size:.78rem; margin-top:.45rem; min-height:1em; }
.discount-msg.ok{ color:var(--green-500); }
.discount-msg.err{ color:var(--red-500); }

/* ---------- terms checkbox ---------- */
.terms-row{
  display:flex; align-items:flex-start; gap:.6rem; margin-top:1rem;
  font-size:.78rem; color:var(--fog); cursor:pointer; line-height:1.5;
}
.terms-row input{ margin-top:.2rem; flex-shrink:0; accent-color:var(--sky-500); width:16px; height:16px; }
.terms-row a{ color:var(--sky-400); text-decoration:underline; }
.terms-error{ color:var(--red-500); font-size:.76rem; margin-top:.5rem; }

/* ---------- floating mobile "book now" button ----------
   Replaced the old full-width sticky bar with a compact round FAB (client
   feedback: the bar felt heavy and, worse, sat on top of the footer's
   owner/manager line once scrolled all the way down). Only the round
   button + a small price badge above it now, bottom-right corner, so the
   footer underneath stays fully readable. */
.sticky-book-fab{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:150;
  bottom:calc(1.1rem + env(safe-area-inset-bottom));
  display:none; flex-direction:column; align-items:flex-end; gap:.5rem;
}
.fab-price{
  font-size:.72rem; color:var(--fog); background:rgba(11,21,38,.92);
  border:1px solid var(--line); border-radius:999px; padding:.35rem .75rem;
  backdrop-filter:blur(8px); white-space:nowrap; align-self:flex-end;
}
.fab-price b{ color:var(--white); font-family:'JetBrains Mono',monospace; }
.fab-btn{
  width:58px; height:58px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg, var(--sky-500), var(--sky-400));
  color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(46,127,240,.45); transition:transform .2s ease;
}
.fab-btn:active{ transform:scale(.94); }
.fab-btn svg{ width:24px; height:24px; }
@media(max-width:720px){
  .sticky-book-fab.show{ display:flex; }
}
.note-box{ font-size:.78rem; color:var(--fog); background:var(--navy-800); border:1px dashed var(--line); border-radius:10px; padding:.9rem; margin-top:1.4rem; line-height:1.8;}

/* ---------- cookie consent banner (GDPR) ---------- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  display:none; align-items:center; justify-content:center; flex-wrap:wrap; gap:1rem;
  background:rgba(11,21,38,.97); backdrop-filter:blur(10px);
  border-top:1px solid var(--line); padding:1rem 1.2rem;
  padding-bottom:calc(1rem + env(safe-area-inset-bottom));
  box-shadow:0 -10px 30px rgba(0,0,0,.35);
}
.cookie-banner p{ margin:0; font-size:.82rem; color:var(--fog); max-width:640px; line-height:1.6; }
.cookie-banner .btn{ padding:.65rem 1.3rem; font-size:.85rem; white-space:nowrap; flex-shrink:0; }

/* Booking form: compact paired fields, including native iOS date controls. */
#bookOverlay{padding:clamp(10px,3vw,24px);}
#bookOverlay .modal{max-width:640px;border-radius:24px;box-shadow:0 24px 80px rgba(0,20,60,.24);}
#bookOverlay .modal-head{background:linear-gradient(120deg,#123b91,#167dcc);color:#fff;gap:12px;}
#bookOverlay .modal-head h3,#bookOverlay .modal-close{color:#fff;}
#bookOverlay .modal-body{padding:clamp(16px,4vw,26px);}
#bookOverlay .row2{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:end;}
#bookOverlay .field{min-width:0;margin-bottom:16px;}
#bookOverlay .field label{font-size:14px;line-height:1.45;overflow-wrap:anywhere;}
#bookOverlay .row2>.field>label{min-height:3em;display:flex;align-items:end;}
#bookOverlay .field input:not([type=radio]):not([type=checkbox]){box-sizing:border-box;display:block;width:100%;min-width:0;max-width:100%;height:50px;padding:10px;border-radius:13px;font-size:16px;line-height:1.4;transition:border-color .15s,box-shadow .15s;}
#bookOverlay .field input:focus{border-color:#187ade;box-shadow:0 0 0 3px rgba(24,122,222,.12);}
#bookOverlay input[type=date],#bookOverlay input[type=time]{direction:ltr;text-align:left;appearance:none;-webkit-appearance:none;}
#bookOverlay input::-webkit-date-and-time-value{text-align:left;min-height:1.4em;}
#bookOverlay input::-webkit-datetime-edit{padding:0;}
#bookOverlay .booking-note{padding:14px;border-radius:14px;font-size:14px;line-height:1.6;margin-bottom:18px;}
#bookOverlay .booking-field-hint{font-size:12px;line-height:1.5;color:var(--fog);margin:-8px 0 20px;}
#bookOverlay .pay-method-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
#bookOverlay .pay-method-choice .pm-opt{display:flex;align-items:center;gap:8px;min-width:0;margin:0;padding:14px 10px;border-radius:14px;font-size:13px;line-height:1.5;}
#bookOverlay .pm-opt input{flex:0 0 auto;width:18px;height:18px;margin:0;}
#bookOverlay .pm-opt span{min-width:0;overflow-wrap:anywhere;}
#bookOverlay .pm-opt:has(input:checked){border-color:#167ade;background:rgba(22,122,222,.08);}
#bookOverlay .total-line{padding:18px 0 10px;gap:12px;}
#bookOverlay .discount-row{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;}
#bookOverlay .terms-row{font-size:13px;line-height:1.6;}
@media(max-width:360px){#bookOverlay .row2{gap:8px;}#bookOverlay .field input:not([type=radio]):not([type=checkbox]){padding:8px 5px;}#bookOverlay .pay-method-choice{grid-template-columns:1fr;}}