/* ===== Wohnmobil Hamminkeln — site vitrine (statique, sans runtime) ===== */

/* Outfit self-hosted (variable font) — no request to Google (GDPR, LG München I 3 O 17493/20) */
@font-face{
  font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('assets/fonts/outfit-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('assets/fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --noir:#121417;--blanc:#FFFFFF;--bleu:#0F4C8C;--gris:#6C7075;
  --ink2:#45474C;--line:rgba(0,0,0,.10);--hell:#8FB4E4;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--blanc);color:var(--noir);
  font-family:'Outfit',system-ui,-apple-system,Segoe UI,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
.mono{font-family:'Courier New',Courier,monospace}
a{text-decoration:none;color:inherit}

@keyframes kenburns{from{transform:scale(1.03)}to{transform:scale(1.13)}}
@keyframes heroIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes cueBob{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(7px);opacity:1}}
@keyframes fabIn{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}

/* ---- boutons (hover) ---- */
.btn{display:inline-block;transition:background .35s ease,transform .35s ease,border-color .35s ease,color .35s ease}
.hv-light:hover{background:#ececec;transform:translateY(-2px);color:#121417}
.hv-ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.9);color:#fff}
.hv-dark:hover{background:#2a2d33;color:#fff}
.hv-blue:hover{background:#12579f;color:#fff}
.hv-hell{transition:color .3s ease}
.hv-hell:hover{color:var(--hell)}
.hv-blueink{transition:color .3s ease}
.hv-blueink:hover{color:var(--bleu)}

/* ---- photo (zoom + cadre au survol) ---- */
.photo{position:relative;overflow:hidden;width:100%;height:100%;background:#e7e7e8;
  transition:box-shadow .55s cubic-bezier(.22,1,.36,1)}
.photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .95s cubic-bezier(.22,1,.36,1)}
.photo:hover{box-shadow:0 0 0 6px #121417,0 30px 60px -28px rgba(0,0,0,.6)}
.photo:hover img{transform:scale(1.09)}

/* ===== Header ===== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:2000;color:#FFFFFF;
  background:transparent;border-bottom:1px solid rgba(255,255,255,0);
  transition:background .55s ease,color .55s ease,border-color .55s ease,backdrop-filter .55s ease}
.site-header.solid{color:#121417;background:rgba(255,255,255,.9);
  border-bottom:1px solid rgba(0,0,0,.08);
  backdrop-filter:saturate(140%) blur(16px);-webkit-backdrop-filter:saturate(140%) blur(16px)}
.hd-inner{max-width:1560px;margin:0 auto;height:84px;display:flex;align-items:center;
  justify-content:space-between;padding:0 clamp(22px,4vw,56px)}
.brand{display:flex;align-items:center;gap:15px;transition:opacity .35s ease}
.brand:hover{opacity:.72;color:inherit}
.brand .logo{width:40px;height:30px;flex:none}
.brand .logo svg{display:block;width:100%;height:100%}
.brand .name{font-size:13.5px;letter-spacing:.26em;white-space:nowrap}
.hd-right{display:flex;align-items:center;gap:clamp(14px,1.8vw,24px)}
.langs{display:flex;align-items:center;gap:11px}
.lang{font-size:11.5px;letter-spacing:.18em;opacity:.5;text-decoration:none;transition:opacity .3s ease}
.lang:hover{opacity:1;color:inherit}
.lang.active{opacity:1;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.hd-div{width:1px;height:15px;background:currentColor;opacity:.3;flex:none}
.menu-trigger{display:flex;align-items:center;gap:14px;cursor:pointer;padding:14px 2px;transition:opacity .35s ease}
.menu-trigger:hover{opacity:.6}
.menu-trigger .lbl{font-size:12.5px;letter-spacing:.3em}
.burger{display:flex;flex-direction:column;gap:5px;width:24px;flex:none}
.burger span{display:block;height:1.5px;background:currentColor}

/* mega-panel */
.panel{position:absolute;left:0;right:0;top:100%;background:#FFFFFF;color:#121417;
  border-bottom:1px solid rgba(0,0,0,.08);box-shadow:0 40px 80px -42px rgba(0,0,0,.4);
  opacity:0;transform:translateY(-14px);pointer-events:none;visibility:hidden;
  transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1),visibility .5s}
.site-header.open .panel{opacity:1;transform:translateY(0);pointer-events:auto;visibility:visible}
.panel-inner{max-width:1560px;margin:0 auto;
  padding:clamp(28px,3.4vw,50px) clamp(22px,4vw,56px) clamp(38px,4vw,58px);
  display:grid;grid-template-columns:1.35fr .85fr;gap:clamp(36px,6vw,92px);align-items:start;
  opacity:0;transform:translateY(10px);
  transition:opacity .6s ease .08s,transform .7s cubic-bezier(.22,1,.36,1) .08s}
.site-header.open .panel-inner{opacity:1;transform:translateY(0)}
.mnav{display:flex;flex-direction:column}
.mnav .rule{height:1px;background:rgba(0,0,0,.09)}
.mnav-item{display:flex;align-items:baseline;gap:24px;padding:18px 2px;
  transition:transform .5s cubic-bezier(.22,1,.36,1),color .4s ease}
.mnav-item:hover{transform:translateX(12px);color:var(--bleu)}
.mnav-item .num{font-size:12px;letter-spacing:.2em;color:#9AA0A6;width:2.4em;flex:none}
.mnav-item .lab{font-weight:200;font-size:clamp(26px,2.8vw,42px);line-height:1.02}
.panel-side{display:flex;flex-direction:column;gap:22px}
.panel-photo{height:212px;width:100%}
.panel-info{font-size:13px;line-height:1.95;color:#45474C}
.panel-info .hd{color:#9AA0A6;letter-spacing:.2em;margin-bottom:6px}
.panel-cta{align-self:flex-start;font-weight:500;font-size:15px;color:#fff;background:#121417;
  border-radius:100px;padding:13px 26px;transition:background .35s ease}
.panel-cta:hover{background:var(--bleu);color:#fff}

/* WhatsApp FAB */
.fab{position:fixed;right:clamp(18px,3vw,32px);bottom:clamp(18px,3vw,32px);z-index:1600;
  display:flex;align-items:center;justify-content:center;width:58px;height:58px;
  background:#121417;color:#fff;border-radius:50%;
  box-shadow:0 16px 34px -10px rgba(18,20,23,.5),0 4px 10px rgba(0,0,0,.18);
  animation:fabIn .6s cubic-bezier(.22,1,.36,1) .3s both;
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease}
.fab:hover{transform:translateY(-3px);box-shadow:0 24px 46px -10px rgba(18,20,23,.6)}
.fab svg{width:26px;height:26px;display:block}

/* reveal on scroll (JS ajoute .is-in) */
.reveal{opacity:0;transform:translateY(28px);
  transition:opacity 1.05s cubic-bezier(.22,1,.36,1),transform 1.05s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform}
.reveal.is-in{opacity:1;transform:none}

@media (max-width:860px){
  .panel-inner{grid-template-columns:1fr;gap:32px}
  .split{grid-template-columns:1fr !important}
  .brand .name{display:none}
  /* Photos paysage : cadres moins hauts sur mobile pour voir tout le camping-car */
  [style*="aspect-ratio:4/5"]{aspect-ratio:16/10 !important}
  /* Hero : recentrer sur la route/camping-car (côté droit de l'image) */
  [style*="header.webp"]{background-position:70% center !important}
}

/* ===== Pages légales (Impressum, Datenschutz) ===== */
.legal-header{position:static;background:#fff;border-bottom:1px solid rgba(0,0,0,.08)}
.legal-header .hd-inner{color:var(--noir)}
.legal-back{font-size:12.5px;letter-spacing:.14em;color:var(--gris);transition:color .3s ease}
.legal-back:hover{color:var(--bleu)}
.legal-main{max-width:820px;margin:0 auto;padding:clamp(44px,7vw,88px) clamp(22px,4vw,32px) clamp(56px,8vw,96px);color:var(--noir)}
.legal-main h1{font-weight:200;font-size:clamp(34px,5vw,52px);line-height:1.1;margin:0 0 40px}
.legal-main h2{font-weight:500;font-size:20px;margin:34px 0 10px}
.legal-main p{font-weight:300;font-size:17px;line-height:1.7;color:var(--ink2);margin:0 0 14px}
.legal-main strong{font-weight:600;color:var(--noir)}
.legal-main a{color:var(--bleu)}
.legal-foot{border-top:1px solid rgba(0,0,0,.08);padding:28px clamp(22px,4vw,32px);text-align:center;font-size:12.5px;letter-spacing:.1em;color:var(--gris)}
.legal-foot a{color:var(--gris);transition:color .3s ease}
.legal-foot a:hover{color:var(--bleu)}