/* Aero-Club Lützellinden — shared styles. MeJuvante identity: Fraunces + Inter, navy/teal. */
:root {
  --navy:#1e3c61; --navy-700:#16304e; --deep:#0e1d38; --deep-2:#142748;
  --teal:#6fd3d9; --teal-deep:#2c99b7; --teal-glow:rgba(111,211,217,.55);
  --ink:#22303c; --muted:#5b6b78; --paper:#ffffff; --mist:#eef4fb; --card:#ffffff;
  --border:#e2e8f1; --slate-200:#dbe6f2; --slate-300:#cbd9ea; --slate-400:#9fb3c9;
  --ring:rgba(30,60,97,.35); --shadow:0 18px 50px -24px rgba(16,30,54,.4);
  --maxw:1120px; --r:16px;
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --ink:#e8eff7; --muted:#a7b7c7; --paper:#0c1420; --mist:#10203a; --card:#12203a;
  --border:#243752; --navy:#5a8bc8; --navy-700:#3f6aa0; --shadow:0 18px 50px -24px rgba(0,0,0,.6); color-scheme:dark; } }
:root[data-theme="dark"]{ --ink:#e8eff7; --muted:#a7b7c7; --paper:#0c1420; --mist:#10203a; --card:#12203a;
  --border:#243752; --navy:#5a8bc8; --navy-700:#3f6aa0; --shadow:0 18px 50px -24px rgba(0,0,0,.6); color-scheme:dark; }

* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
.wrap { width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-left:max(20px, env(safe-area-inset-left,0px)); padding-right:max(20px, env(safe-area-inset-right,0px)); }
h1,h2,h3 { font-family:var(--font-display); font-weight:600; line-height:1.1; text-wrap:balance; margin:0; letter-spacing:-.01em; }
p { margin:0; }
a { color:inherit; }
.eyebrow { font-weight:700; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-deep); }
.btn { display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:.95rem; padding:.78rem 1.3rem;
  border-radius:999px; border:1px solid transparent; text-decoration:none; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn-primary { background:var(--navy); color:#fff; box-shadow:0 10px 24px -12px var(--ring); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 16px 30px -14px var(--ring); }
.btn-teal { background:var(--teal); color:#06202a; box-shadow:0 10px 30px -10px var(--teal-glow); }
.btn-teal:hover { transform:translateY(-2px); box-shadow:0 16px 38px -12px var(--teal-glow); }
.btn-ghost { background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.34); }
.btn-ghost:hover { background:rgba(255,255,255,.2); transform:translateY(-2px); }
.btn-outline { background:transparent; color:var(--navy); border-color:var(--border); }
.btn-outline:hover { border-color:var(--navy); transform:translateY(-2px); }

/* nav */
header.nav { position:sticky; top:env(safe-area-inset-top,0px); z-index:30; overflow:hidden; background:var(--deep); border-bottom:1px solid rgba(255,255,255,.08); }
header.nav .cnv { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.9; }
body::before { content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); background:var(--deep); z-index:29; }
.nav-row { position:relative; z-index:2; display:flex; align-items:center; gap:1rem; min-height:66px; }
.brand { display:flex; align-items:center; gap:.66rem; text-decoration:none; margin-right:auto; }
.brand .logo-badge { background:#fff; border-radius:10px; padding:3px 6px; display:flex; align-items:center; box-shadow:0 3px 12px rgba(0,0,0,.28); flex:0 0 auto; }
.brand .logo-badge img { height:40px; width:auto; display:block; }
.brand b { font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:#fff; line-height:1; letter-spacing:-.01em; }
.brand span { display:block; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--slate-400); font-weight:700; margin-top:3px; }
nav.links { display:flex; gap:.2rem; align-items:center; }
nav.links a { text-decoration:none; color:var(--slate-300); font-weight:600; font-size:.92rem; padding:.5rem .72rem; border-radius:10px; transition:color .15s, background .15s; }
nav.links a:hover, nav.links a[aria-current="page"] { color:#fff; background:rgba(255,255,255,.1); }
.nav-cta { display:flex; align-items:center; gap:.6rem; position:relative; z-index:2; }
.nav-login { font-weight:600; font-size:.92rem; color:var(--slate-300); text-decoration:none; }
.nav-login:hover { color:#fff; }
@media (max-width:980px){ nav.links, .nav-login { display:none; } }

/* hero (home) */
.hero { position:relative; overflow:hidden; color:#fff; isolation:isolate; }
.hero .bg { position:absolute; inset:0; z-index:-2; background-image:url("img/hero.jpg"); background-size:cover; background-position:center 38%; }
.hero .scrim { position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg, rgba(10,22,44,.92) 0%, rgba(12,26,52,.78) 42%, rgba(12,26,52,.45) 100%),
             radial-gradient(900px 480px at 85% -10%, var(--teal-glow), transparent 60%); }
.hero .planes { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.hero .ap { position:absolute; width:54px; opacity:.85; filter:drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.hero .ap1 { top:24%; left:-8%; } .hero .ap2 { top:58%; left:-8%; width:38px; opacity:.6; }
@media (prefers-reduced-motion: no-preference){ .hero .ap1{ animation:fly1 22s linear infinite; } .hero .ap2{ animation:fly2 30s linear infinite 4s; } }
@keyframes fly1 { 0%{transform:translate(0,0) rotate(-4deg)} 100%{transform:translate(128vw,-6vh) rotate(-4deg)} }
@keyframes fly2 { 0%{transform:translate(0,0) rotate(3deg)} 100%{transform:translate(128vw,4vh) rotate(3deg)} }
.hero .wrap { position:relative; z-index:2; padding-block:clamp(3.6rem,9vw,6.5rem) clamp(3rem,7vw,5rem); }
.hero-inner { max-width:40rem; }
.hero h1 { font-size:clamp(2.3rem,6vw,3.9rem); color:#fff; font-weight:600; }
.hero h1 em { font-style:italic; color:var(--teal); text-shadow:0 0 30px var(--teal-glow); }
.hero .lede { margin-top:1.1rem; font-size:clamp(1.02rem,2.4vw,1.22rem); color:var(--slate-200); max-width:36ch; }
.hero-cta { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.9rem; }
.hero-meta { display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:2.2rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.18); }
.hero-meta b { font-family:var(--font-display); font-size:1.5rem; color:#fff; font-weight:600; display:block; }
.hero-meta span { font-size:.8rem; letter-spacing:.04em; color:var(--slate-300); }

/* compact page hero (subpages) */
.page-hero { position:relative; overflow:hidden; color:#fff; background:linear-gradient(140deg, var(--navy-700), var(--deep)); isolation:isolate; }
.page-hero .cnv { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.85; z-index:0; }
.page-hero .wrap { position:relative; z-index:2; padding-block:clamp(2.6rem,6vw,4rem); }
.page-hero h1 { font-size:clamp(2rem,5vw,3rem); color:#fff; }
.page-hero p { margin-top:.7rem; color:var(--slate-200); max-width:52ch; }
.crumb { font-size:.8rem; color:var(--slate-400); letter-spacing:.02em; margin-bottom:.6rem; }
.crumb a { color:var(--slate-300); text-decoration:none; } .crumb a:hover{ color:var(--teal); }

section { padding-block:clamp(3rem,7vw,5.2rem); }
.sec-head { max-width:62ch; margin-bottom:2.2rem; }
.sec-head h2 { font-size:clamp(1.7rem,4vw,2.5rem); color:var(--navy); margin-top:.5rem; }
.sec-head p { color:var(--muted); margin-top:.7rem; font-size:1.05rem; }

/* prose */
.prose { max-width:70ch; }
.prose p { color:var(--muted); margin-top:1rem; font-size:1.05rem; }
.prose h2 { color:var(--navy); font-size:clamp(1.5rem,3.5vw,2.1rem); margin-top:2.2rem; }
.prose h3 { color:var(--ink); font-size:1.2rem; margin-top:1.6rem; }
.prose ul { color:var(--muted); margin-top:1rem; padding-left:1.2rem; }
.prose li { margin:.3rem 0; }
.prose a { color:var(--navy); font-weight:600; }

/* cards */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
@media (max-width:820px){ .cards { grid-template-columns:1fr; } }
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease; min-width:0; }
.card:hover { transform:translateY(-5px); box-shadow:0 26px 50px -22px rgba(16,30,54,.5); }
.card .ph { aspect-ratio:16/10; background-size:cover; background-position:center; position:relative; }
.card .ph::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(14,29,56,.35)); }
.card .body { padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.card h3 { font-size:1.3rem; color:var(--ink); }
.card p { color:var(--muted); font-size:.97rem; }
.card a.more { margin-top:auto; font-weight:700; font-size:.92rem; color:var(--navy); text-decoration:none; display:inline-flex; align-items:center; gap:.35rem; }
.card a.more:hover { gap:.6rem; }

/* spec cards (fleet) */
.fleet { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
@media (max-width:900px){ .fleet { grid-template-columns:1fr; } }
.plane-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; }
.plane-card .ph { aspect-ratio:16/10; background-size:cover; background-position:center; cursor:zoom-in; }
.plane-card .thumbs { display:flex; gap:.5rem; padding:1rem 1.4rem 1.4rem; flex-wrap:wrap; }
.plane-card .thumb { width:62px; height:42px; border-radius:8px; overflow:hidden; border:1px solid var(--border); padding:0; cursor:pointer; background-size:cover; background-position:center; transition:transform .15s, border-color .15s; }
.plane-card .thumb:hover { transform:translateY(-2px); border-color:var(--teal); }
.plane-card .thumb.soon { display:flex; align-items:center; justify-content:center; font-size:.68rem; color:var(--muted); font-weight:700; background:var(--mist); cursor:default; text-align:center; line-height:1.1; }
.plane-card .thumb.soon:hover { transform:none; border-color:var(--border); }

/* lightbox */
#lightbox { position:fixed; inset:0; z-index:10000; background:rgba(8,16,30,.93); display:none; align-items:center; justify-content:center; padding:24px; }
#lightbox.open { display:flex; }
#lightbox img { max-width:92vw; max-height:82vh; border-radius:12px; box-shadow:0 30px 80px -20px rgba(0,0,0,.7); }
#lightbox .lb-cap { position:absolute; bottom:18px; left:0; right:0; text-align:center; color:#fff; font-family:var(--font-display); font-size:1.2rem; }
#lightbox .lb-cap small { display:block; color:var(--slate-300); font-family:var(--font-body); font-size:.85rem; font-weight:400; margin-top:.25rem; }
#lightbox button { position:absolute; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); color:#fff; width:46px; height:46px; border-radius:50%; font-size:1.5rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
#lightbox button:hover { background:rgba(255,255,255,.22); }
#lightbox .lb-prev { left:16px; top:50%; transform:translateY(-50%); }
#lightbox .lb-next { right:16px; top:50%; transform:translateY(-50%); }
#lightbox .lb-close { right:16px; top:16px; font-size:1.3rem; }
.plane-card .top { padding:1.2rem 1.4rem; background:linear-gradient(140deg,var(--navy-700),var(--deep)); color:#fff; }
.plane-card .reg { font-family:var(--font-display); font-size:1.5rem; font-weight:600; letter-spacing:.02em; }
.plane-card .type { color:var(--slate-300); font-size:.9rem; margin-top:.15rem; }
.plane-card dl { margin:0; padding:1.1rem 1.4rem 1.4rem; display:grid; grid-template-columns:auto 1fr; gap:.4rem 1rem; font-size:.92rem; }
.plane-card dt { color:var(--muted); } .plane-card dd { margin:0; color:var(--ink); font-weight:600; text-align:right; }

/* data table */
.data { max-width:760px; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); }
.data table { width:100%; border-collapse:collapse; font-size:.95rem; }
.data td { padding:.7rem 1rem; border-bottom:1px solid var(--border); vertical-align:top; }
.data tr:last-child td { border-bottom:0; }
.data td:first-child { color:var(--muted); width:42%; }
.data td:last-child { color:var(--ink); font-weight:600; }
.info-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; }
@media (max-width:760px){ .info-grid { grid-template-columns:1fr; } .data td:first-child{ width:48%; } }
.panel { background:var(--mist); border:1px solid var(--border); border-radius:var(--r); padding:1.5rem; }
.panel h3 { color:var(--navy); font-size:1.15rem; } .panel p { color:var(--muted); margin-top:.6rem; }

.about { background:var(--mist); }
.about-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
@media (max-width:820px){ .about-grid { grid-template-columns:1fr; } }
.about h2 { font-size:clamp(1.7rem,4vw,2.5rem); color:var(--navy); }
.about p { color:var(--muted); margin-top:1rem; }
.about .frame { aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); background-image:url("img/card2.jpg"); background-size:cover; background-position:center; }

.stats { background:linear-gradient(140deg, var(--navy-700), var(--deep)); color:#fff; }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
@media (max-width:720px){ .stat-grid { grid-template-columns:repeat(2,1fr); } }
.stat { text-align:center; }
.stat b { font-family:var(--font-display); font-weight:600; font-size:clamp(2rem,5vw,2.8rem); color:var(--teal); display:block; font-variant-numeric:tabular-nums; text-shadow:0 0 24px var(--teal-glow); }
.stat span { color:var(--slate-300); font-size:.9rem; letter-spacing:.03em; }

.quote { text-align:center; }
.quote blockquote { font-family:var(--font-display); font-weight:500; font-style:italic; font-size:clamp(1.4rem,3.4vw,2.1rem); color:var(--ink); max-width:20ch; margin:0 auto; line-height:1.25; }
.quote cite { display:block; margin-top:1.1rem; font-style:normal; font-weight:700; color:var(--teal-deep); letter-spacing:.04em; font-size:.9rem; }

footer { position:relative; overflow:hidden; background:var(--deep); color:var(--slate-300); padding-block:clamp(3rem,6vw,4.5rem) 2rem; isolation:isolate; }
footer .cnv { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; opacity:.95; }
footer .wrap { position:relative; z-index:2; }
.foot-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2rem; }
@media (max-width:820px){ .foot-grid { grid-template-columns:1fr; gap:1.6rem; } }
footer h3 { color:#fff; font-size:1.05rem; font-family:var(--font-body); font-weight:700; letter-spacing:.02em; margin-bottom:.9rem; }
footer p, footer a { font-size:.95rem; color:var(--slate-300); }
footer a { text-decoration:none; } footer a:hover { color:var(--teal); }
.foot-contact div { margin-bottom:.55rem; }
.foot-brand p { margin-top:.8rem; max-width:34ch; color:var(--slate-400); }
.foot-bottom { margin-top:2.4rem; padding-top:1.3rem; border-top:1px solid rgba(255,255,255,.14); display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center; justify-content:space-between; font-size:.85rem; color:var(--slate-400); }
.foot-bottom nav { display:flex; gap:1.2rem; flex-wrap:wrap; }
.copy-chip { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:.2rem .6rem; font-size:.8rem; }

#plane { position:fixed; top:0; left:0; width:42px; height:42px; margin:-21px 0 0 -21px; pointer-events:none; z-index:9999; will-change:transform; display:none; filter:drop-shadow(0 3px 8px rgba(111,211,217,.5)); }
#trail { position:fixed; inset:0; pointer-events:none; z-index:9998; display:none; }
@media (pointer: fine){ body.plane-on { cursor:none; } }
body.plane-on a, body.plane-on button, body.plane-on .btn { cursor:none; }
:focus-visible { outline:3px solid var(--teal); outline-offset:2px; border-radius:6px; }
