/* =========================================================
   MultiReisen — Public Landing Page Styles
   Palette: brand cyan + navy (matches multireisen.com header/footer)
   ========================================================= */

:root{
  --cyan:#17b9e6;
  --cyan-dark:#0ea5cf;
  --navy-900:#0a1f3d;
  --navy-800:#0d2748;
  --navy-700:#123159;
  --ink:#101828;
  --ink-soft:#475467;
  --border:#e3e9f5;
  --white:#ffffff;
  --bg-tint:#f5f9fd;
  --success:#16a34a;
  --danger:#dc2626;
  --warning:#d97706;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --shadow-sm: 0 2px 8px rgba(16,24,40,.06);
  --shadow-md: 0 8px 24px rgba(16,24,40,.08);
  --shadow-lg: 0 20px 48px rgba(10,40,90,.14);
  --font-display:'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-display); margin:0; color:var(--ink);}
p{margin:0; color:var(--ink-soft); line-height:1.6;}
a{color:inherit; text-decoration:none;}
ul{margin:0; padding:0;}
.container{max-width:1180px; margin:0 auto; padding:0 24px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:15px;
  padding:13px 26px; border-radius:999px; border:2px solid transparent;
  background-clip:padding-box; -webkit-background-clip:padding-box;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:linear-gradient(135deg,var(--cyan),var(--navy-800)); color:#fff; box-shadow:var(--shadow-md);}
.btn-primary:hover{box-shadow:0 12px 28px rgba(14,165,207,.3);}
.btn-outline{background:#fff; border-color:var(--cyan); color:var(--navy-800);}
.btn-outline:hover{background:var(--bg-tint);}
.btn-ghost{background:transparent; color:var(--navy-800);}
.btn-ghost:hover{background:var(--bg-tint);}
.btn-block{width:100%;}
.btn-sm{padding:9px 18px; font-size:14px;}
.btn[disabled]{opacity:.7; cursor:not-allowed;}
.btn-spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.5); border-top-color:#fff;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* =========================================================
   TOP UTILITY BAR
   ========================================================= */
.topbar{display:flex; font-size:13.5px;}
.topbar-left{
  background:var(--cyan);
  color:#fff; font-weight:700;
  display:flex; align-items:center;
  flex:0 0 33%;
  padding:11px 30px 11px 32px;
  clip-path:polygon(0 0, 100% 0, calc(100% - 24px) 100%, 0 100%);
  margin-right:-20px;
  position:relative; z-index:1;
}
.topbar-right{
  background:var(--navy-900);
  flex:1;
  display:flex; align-items:center; justify-content:flex-end; gap:26px;
  padding:11px 24px 11px 40px;
}
.topbar-right a{color:#dce6f5; font-weight:500; transition:color .15s ease;}
.topbar-right a:hover{color:#fff;}
.topbar-lang{display:flex; align-items:center; gap:6px; color:#dce6f5; cursor:pointer;}
.topbar-lang .flag{font-size:15px;}
.topbar-lang svg{width:10px; height:10px;}

/* =========================================================
   MAIN NAVBAR
   ========================================================= */
.navbar{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--border);}
.navbar-inner{display:flex; align-items:center; justify-content:space-between; padding:10px 24px; gap:28px;}
.brand{flex-shrink:0;}
.brand img{display:block; height:84px; width:auto;}

.navlinks{display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0;}
.navlinks > li{position:relative;}
.navlinks > li > a{
  display:flex; align-items:center; gap:5px;
  padding:10px 14px; border-radius:8px; font-weight:600; font-size:15px; color:var(--navy-800);
  transition:background .15s ease, color .15s ease;
}
.navlinks > li > a:hover, .navlinks > li.open > a{background:var(--bg-tint); color:var(--cyan-dark);}
.navlinks .caret{width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-3px; transition:transform .15s ease;}
.navlinks > li.open .caret{transform:rotate(-135deg); margin-top:2px;}

.dropdown{
  position:absolute; top:calc(100% + 8px); left:0; min-width:220px;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); padding:8px; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
  list-style:none;
}
.navlinks > li.open .dropdown{opacity:1; visibility:visible; transform:translateY(0);}
.dropdown li a{display:block; padding:9px 12px; border-radius:8px; font-size:14px; color:var(--ink-soft); font-weight:500;}
.dropdown li a:hover{background:var(--bg-tint); color:var(--navy-900);}

.navbar-actions{display:flex; align-items:center; gap:14px;}
.navbar-burger{display:none; background:none; border:none; cursor:pointer; padding:6px;}
.navbar-burger span{display:block; width:24px; height:2.5px; background:var(--navy-900); margin:5px 0; border-radius:2px;}

/* ---------- Hero ---------- */
.hero{background:radial-gradient(1200px 600px at 80% -10%, #e4f7fd, transparent), var(--white); padding:72px 0 40px;}
.hero-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;}
.eyebrow{
  display:inline-block; background:#e4f7fd; color:var(--cyan-dark);
  font-weight:700; font-size:13px; letter-spacing:.4px; padding:6px 14px; border-radius:999px; margin-bottom:18px;
}
.hero h1{font-size:44px; line-height:1.15; font-weight:800; letter-spacing:-.5px;}
.hero-subtitle{margin-top:18px; font-size:18px; max-width:520px;}
.hero-actions{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
.hero-stats{display:flex; gap:32px; margin-top:44px; flex-wrap:wrap;}
.hero-stats div{display:flex; flex-direction:column;}
.hero-stats strong{font-family:var(--font-display); font-size:20px; color:var(--navy-800);}
.hero-stats span{font-size:13px; color:var(--ink-soft);}
.hero-visual{display:flex; justify-content:center;}
.hero-illustration{width:100%; max-width:440px; filter:drop-shadow(var(--shadow-lg));}

/* ---------- How it works ---------- */
.how{padding:20px 0 64px;}
.how-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.how-card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:28px 24px; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease;
}
.how-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.how-icon{
  width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,var(--cyan),var(--navy-800));
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; margin-bottom:16px;
}
.how-card h3{font-size:17px; margin-bottom:8px;}
.how-card p{font-size:14.5px;}

/* ---------- Form section ---------- */
.form-section{background:var(--bg-tint); padding:64px 0 88px;}
.form-container{display:flex; justify-content:center;}
.form-card{
  background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  padding:44px; width:100%; max-width:760px; border:1px solid var(--border);
}
.form-card h2{font-size:28px; margin-bottom:8px;}
.form-intro{margin-bottom:28px; font-size:14.5px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.form-group{margin-bottom:20px;}
.form-group label{display:block; font-weight:600; font-size:14px; margin-bottom:7px; color:var(--ink);}
.optional{font-weight:400; color:var(--ink-soft); font-size:12.5px;}
.form-group input[type=text],
.form-group input[type=email],
.form-group input[type=tel],
.form-group textarea{
  width:100%; border:1.5px solid var(--border); border-radius:var(--radius-sm);
  padding:12px 14px; font-size:15px; font-family:var(--font-body); color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease; background:#fbfcff;
}
.form-group input:focus, .form-group textarea:focus{
  outline:none; border-color:var(--cyan); box-shadow:0 0 0 4px rgba(23,185,230,.14); background:#fff;
}
.form-group textarea{resize:vertical; min-height:130px;}
.field-error{display:block; color:var(--danger); font-size:12.5px; margin-top:5px; min-height:1px;}

/* ---------- Dropzone ---------- */
.dropzone{
  border:2px dashed #a9d9ea; border-radius:var(--radius-md); background:var(--bg-tint);
  padding:28px 20px; text-align:center; cursor:pointer; transition:background .15s ease, border-color .15s ease;
}
.dropzone.dragover{background:#e4f7fd; border-color:var(--cyan);}
.dropzone p{margin:10px 0 4px; font-size:14.5px; color:var(--ink);}
.dropzone-hint{font-size:12.5px; color:var(--ink-soft);}
.file-list{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px;}
.file-list li{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--bg-tint); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:9px 14px; font-size:13.5px;
}
.file-list li .fname{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.file-list li .fsize{color:var(--ink-soft); flex-shrink:0;}
.file-list li button{
  background:none; border:none; color:var(--danger); cursor:pointer; font-size:16px; line-height:1; flex-shrink:0;
}

/* ---------- Progress ---------- */
.progress-wrap{margin:6px 0 20px;}
.progress-bar{height:8px; border-radius:999px; background:#e4f7fd; overflow:hidden;}
.progress-fill{height:100%; width:0%; background:linear-gradient(90deg,var(--cyan),var(--navy-800)); transition:width .2s ease;}
#progressLabel{font-size:12.5px; color:var(--ink-soft); display:block; margin-top:6px;}

/* ---------- Alerts ---------- */
.form-alert{
  border-radius:var(--radius-sm); padding:12px 16px; font-size:14px; margin-bottom:18px;
  background:#fef2f2; color:var(--danger); border:1px solid #fecaca;
}

/* ---------- Success state ---------- */
.success-state{text-align:center; padding:30px 10px;}
.success-icon{margin-bottom:14px;}
.success-state h3{font-size:24px; margin-bottom:8px;}
.success-state p{margin-bottom:24px; font-size:15px;}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:var(--navy-900); color:#c3cee0;}

.footer-top{display:flex; align-items:stretch; flex-wrap:wrap;}
.footer-phone{
  background:var(--cyan);
  color:#fff; display:flex; align-items:center; gap:14px; font-weight:600;
  padding:22px 40px 22px 28px;
  clip-path:polygon(0 0, 100% 0, calc(100% - 40px) 100%, 0 100%);
  margin-right:-30px;
}
.footer-phone svg{flex-shrink:0;}
.footer-phone .phone-label{display:flex; flex-direction:column; font-size:14.5px; line-height:1.3;}
.footer-phone .phone-label strong{font-size:17px; letter-spacing:.2px;}
.footer-brandline{
  flex:1; display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  padding:22px 24px 22px 56px;
}
.footer-brandline .fb-name{white-space:nowrap;}
.footer-brandline .fb-name strong{display:block; font-family:var(--font-display); font-size:19px; color:#fff; letter-spacing:.4px;}
.footer-brandline .fb-name span{display:block; font-size:12px; color:#8fa2c2; letter-spacing:.3px;}
.footer-brandline .fb-divider{width:1px; align-self:stretch; background:#22345a;}
.footer-brandline p{font-size:14px; color:#a9b6cf; max-width:640px; line-height:1.6;}

.footer-main{padding:48px 0 20px;}
.footer-grid{display:grid; grid-template-columns:1.1fr 1.1fr 1.2fr 1.4fr; gap:32px;}
.footer-col h4{color:#fff; font-size:15px; font-weight:700; margin-bottom:18px; letter-spacing:.2px;}
.footer-col ul{list-style:none; display:flex; flex-direction:column; gap:11px;}
.footer-col ul a{
  display:flex; align-items:center; gap:8px; font-size:14px; color:#a9b6cf; transition:color .15s ease;
}
.footer-col ul a:hover{color:#fff;}
.footer-col ul a::before{content:''; width:6px; height:6px; border-radius:1px; background:var(--cyan); flex-shrink:0; transform:rotate(45deg);}

.footer-gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-width:210px;}
.footer-gallery .g-thumb{
  aspect-ratio:1/1; border-radius:6px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-800)); border:1px solid #22345a;
}
.footer-gallery .g-thumb svg{width:18px; height:18px; opacity:.55;}

.footer-newsletter p.lead{font-size:13.5px; color:#a9b6cf; margin-bottom:16px;}
.newsletter-form{display:flex; flex-direction:column; gap:10px;}
.newsletter-form input[type=email]{
  width:100%; border:1px solid #22345a; background:var(--navy-800); color:#fff;
  border-radius:8px; padding:12px 14px; font-size:14px; font-family:var(--font-body);
}
.newsletter-form input[type=email]::placeholder{color:#7386a8;}
.newsletter-form input[type=email]:focus{outline:none; border-color:var(--cyan);}
.newsletter-form button{
  background:var(--cyan); color:#fff; border:none; border-radius:8px; padding:12px 16px;
  font-weight:700; font-size:14px; cursor:pointer; transition:background .15s ease;
}
.newsletter-form button:hover{background:var(--cyan-dark);}
.newsletter-note{font-size:12px; color:#7386a8; margin-top:2px;}

.footer-bottom{border-top:1px solid #1b2c4d; padding:18px 0; text-align:center; font-size:13px; color:#7386a8;}
.footer-bottom a{color:#a9b6cf; font-weight:600;}
.footer-bottom a:hover{color:#fff;}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .footer-grid{grid-template-columns:1fr 1fr; row-gap:36px;}
}
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr; text-align:center;}
  .hero-actions, .hero-stats{justify-content:center;}
  .hero-subtitle{margin-left:auto; margin-right:auto;}
  .how-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .form-card{padding:30px 22px;}
  .hero h1{font-size:34px;}
  .topbar-right{gap:16px;}
  .navlinks{
    position:fixed; top:0; right:0; height:100vh; width:280px; background:#fff;
    flex-direction:column; align-items:stretch; padding:80px 20px 20px; box-shadow:-8px 0 30px rgba(0,0,0,.12);
    transform:translateX(100%); transition:transform .25s ease; overflow-y:auto;
  }
  .navlinks.open{transform:translateX(0);}
  .navlinks > li > a{width:100%; justify-content:space-between;}
  .dropdown{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; display:none; padding-left:12px;}
  .navlinks > li.open .dropdown{display:block;}
  .navbar-burger{display:block;}
  .footer-brandline{padding-left:24px;}
  .footer-brandline .fb-divider{display:none;}
}
@media (max-width: 640px){
  .topbar-left{flex-basis:60%; padding:8px 22px 8px 18px; clip-path:polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%); margin-right:-14px;}
  .topbar-right{padding:8px 16px 8px 24px; gap:12px; font-size:12px;}
  .topbar-right a:not(:last-child){display:none;}
  .brand img{height:48px;}
  .footer-top{flex-direction:column;}
  .footer-phone{clip-path:none; margin-right:0;}
  .footer-brandline{padding:20px 24px;}
  .footer-grid{grid-template-columns:1fr;}
}
@media (max-width: 480px){
  .navbar-inner{padding:12px 16px;}
  .hero{padding:48px 0 24px;}
  .container{padding:0 16px;}
}