:root{
  --ink:#142341;
  --ink2:#2d3e63;
  --blue:#0f3778;
  --bg:#f5f8ff;
  --card:#ffffff;
  --muted:#6b7a99;
  --radius:18px;
}

/* Best-effort content protection */
body{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Allow selection in form fields */
input, textarea, select, button{
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

img, svg{
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none; /* prevents drag/save via long-press; keep links on wrappers */
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);background-repeat:no-repeat;background-position:center top;background-size:cover}

/* Background images handled by assets/main.js (scheduled) */
body.bg-christmas{background-image:url(./img/bg_christmas.png)}
body.bg-newyear{background-image:url(./img/bg_newyear.png)}
body.bg-default{background-image:url(./img/bg_default.svg)}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1180px;margin:0 auto;padding:24px}
.hero{
  border-radius:28px;
  /* soften edges + hide possible hard bars in the hero image */
  background:
    linear-gradient(90deg, rgba(245,248,255,0.98) 0%, rgba(245,248,255,0.82) 52%, rgba(245,248,255,0.42) 74%, rgba(245,248,255,0.96) 92%, rgba(245,248,255,1.00) 100%),
    url(./img/hero_desktop.png);
  background-size:cover;
  background-position: right center;
  background-repeat:no-repeat;
  overflow:hidden;
  padding:72px 56px;
  position:relative;
  box-shadow:0 24px 60px rgba(15,55,120,0.10);
}

/* Zeitgesteuerte Hintergründe */
body.theme-christmas{background-image:url(./img/bg_christmas.png)}
body.theme-newyear{background-image:url(./img/bg_newyear.png)}
body.theme-default{background-image:url(./img/bg_default.svg)}

.topbar{display:flex;align-items:center;gap:24px;margin-bottom:18px}
.brand img{height:102px;width:auto}

.topbar__nav{flex:1;display:flex;align-items:center;gap:18px;}
.topbar__links{flex:1;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;}
.topbar__cta{display:flex;align-items:center;justify-content:flex-end;}
.topbar__cta .btn{white-space:nowrap;}

.badge{font-size:13px;color:var(--muted);background:rgba(255,255,255,0.72);padding:10px 12px;border-radius:999px;border:1px solid rgba(15,55,120,0.10)}

.h1{font-size:54px;line-height:1.05;margin:18px 0 12px 0;letter-spacing:-0.02em}

/* Hero layout refinements (v1.4.3) */
.hero .eyebrow,
.hero .lead,
.hero .cta,
.hero .small{max-width:640px}

.hero .h1{
  max-width:640px;
  text-align:center; /* headline centered */
  margin-right:10px; /* keep 10px breathing room */
}

.hero .eyebrow,
.hero .lead,
.hero .small{ text-align:left; }

@media (min-width: 1100px){
  /* reserve space for the hero image so text doesn't collide */
  .hero{ padding-right:420px; }
}

@media (max-width: 1099px){
  /* on tablet and below the hero becomes text-first; do not reserve image width */
  .hero{ padding-right:56px; background-position: 55% 30%; }
}

@media (max-width: 900px){
  .hero{
    padding:56px 28px;
    background-position: 55% 20%;
  }
  .hero::before{display:none}
  .hero::after{opacity:0.16}
  .cta{flex-direction:column;align-items:flex-start}
  .cta .btn{width:100%;max-width:360px}
}

@media (max-width: 640px){
  .hero{padding:44px 18px;background-position: 55% 18%}
  .hero .h1{font-size:38px;text-align:left;max-width:100%;margin-right:0}
  .hero .eyebrow,.hero .lead,.hero .small{max-width:100%}
  .cta .btn{max-width:100%}
}

.lead{font-size:18px;line-height:1.55;color:var(--ink2);max-width:620px;margin:0 0 22px 0}

.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:52px;padding:0 18px;border-radius:14px;
  font-weight:600;letter-spacing:0.01em;
  border:2px solid transparent;
}
.btn-primary{background:var(--blue);color:#fff}
.btn-ghost{background:rgba(255,255,255,0.80);border-color:rgba(15,55,120,0.25);color:var(--blue)}
.small{font-size:14px;color:var(--muted);margin-top:14px}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px}
.card{background:#fff;border:none;border-radius:18px;padding:22px;box-shadow:0 10px 24px rgba(15,55,120,.08);}
.card__icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--blue);margin-bottom:10px}
.card__icon svg{width:44px;height:44px}

.card h3{margin:0 0 6px 0;font-size:16px}
.card p{margin:0;color:var(--ink2);font-size:14px;line-height:1.45}

.footer{
  margin-top:18px;
  font-size:12px;color:var(--muted);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap
}
/* On the Hero we do not show the small internal footer line (site footer is below) */
.hero .footer{display:none}
.disclaimer{font-size:12px;color:var(--muted);margin-top:10px}

/* Simple content panels (Thank-you / error pages) */
.panel{
  margin-top:18px;
  background:rgba(255,255,255,0.95);
  border:1px solid rgba(15,55,120,0.10);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:0 18px 44px rgba(15,55,120,0.08);
}
.panel h1{margin:0 0 10px 0;font-size:34px;letter-spacing:-0.01em}
.panel p{margin:0 0 10px 0;color:var(--ink2);line-height:1.55}
.panel ul{margin:10px 0 0 18px;color:var(--ink2)}

/* Waitlist form wrapper */
.formbox{margin-top:18px}
.formbox .card{background:#fff;border:none;border-radius:18px;padding:22px;box-shadow:0 10px 24px rgba(15,55,120,.08);}
.formbox label{display:block;font-size:14px;color:var(--ink2);margin:0 0 6px 0}
.formbox input[type="text"],
.formbox input[type="email"],
.formbox select,
.formbox textarea{
  width:100%;
  border:1px solid rgba(15,55,120,0.20);
  border-radius:14px;
  padding:12px 14px;
  font-size:16px;
  outline:none;
}
.formbox input[type="submit"],
.formbox button{
  cursor:pointer;
}

@media (max-width: 920px){
  .hero{padding:56px 22px;background-image:
    linear-gradient(180deg, rgba(245,248,255,0.96) 0%, rgba(245,248,255,0.78) 55%, rgba(245,248,255,0.10) 100%),
    url(./img/hero_mobile.png);
    background-position:center bottom;
  }
  .h1{font-size:40px}
  .grid{grid-template-columns:1fr}
}

/* Mobile-first: remove the hero image at smaller widths and let the site background do the work */
@media (max-width: 720px){
  .container{padding:14px}
  .hero{
    padding:34px 18px;
    background-image:none;
    background-color:rgba(245,248,255,0.86);
    box-shadow:0 16px 40px rgba(15,55,120,0.10);
  }
  .topbar{gap:14px}
  .brand img{height:86px}
}

/* Popup */
.ik-popup{position:fixed; z-index:9999; right:18px; bottom:18px; max-width:380px; display:none}
.ik-popup.ik-popup--show{display:block}
.ik-popup__inner{display:flex; gap:12px; align-items:flex-start; background:rgba(255,255,255,0.92); border:1px solid rgba(0,0,0,0.08); box-shadow:0 18px 40px rgba(15,55,120,0.18); border-radius:16px; padding:14px}
.ik-popup__logo{flex:0 0 auto}
.ik-popup__logo img{height:38px;width:auto;display:block}
.ik-popup__content{flex:1 1 auto; font-size:14px; line-height:1.35; color:var(--ink)}
.ik-popup__title{font-weight:700; margin:0 0 4px 0}
.ik-popup__text{margin:0}
.ik-popup__close{appearance:none;border:0;background:transparent;color:var(--muted); font-size:22px; line-height:1; padding:0 6px; cursor:pointer}
.ik-popup__close:hover{color:var(--ink)}
@media (max-width: 720px){
  .ik-popup{left:14px; right:14px; bottom:14px; max-width:none}
}

/* Footer */
.site-footer{padding:14px 0; border-top:1px solid rgba(15,55,120,0.08); background:transparent;}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.site-footer a{color:rgba(255,255,255,.88); text-decoration:none}
.site-footer a:hover{text-decoration:underline}

/* Mobile/tablet: footer needs its own solid layer for readability on bright background images */
@media (max-width: 920px){
  .site-footer{
    background:rgba(18,30,79,0.78);
    border-top:1px solid rgba(255,255,255,0.14);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .site-footer .footer-inner{flex-direction:column; align-items:center; gap:10px}
  .site-footer .footer-right{justify-content:center; flex-wrap:wrap}
  .site-footer .footer-left{color:rgba(255,255,255,.92)}
}
.footer-right{display:flex; gap:14px; flex-wrap:wrap}

/* Simple content pages */
.page{padding:40px 0 60px}
.page h1{margin:0 0 18px}
.card{background:#fff;border:none;border-radius:18px;padding:22px;box-shadow:0 10px 24px rgba(15,55,120,.08);}
.card p{margin:0 0 10px}
.card p:last-child{margin-bottom:0}

/* Responsive grids */
@media(max-width:1024px){.grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.grid{grid-template-columns:1fr;}}


/* Header alignment + responsive hamburger (v1.4.2) */
.topbar{margin-bottom:18px}
.topbar__inner{
  width: min(1200px, 92vw);
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.topbar__nav{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
}
.topbar__links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  flex-wrap:nowrap;
}
.brand img{height:92px;width:auto}

/* Hamburger */
.nav-toggle{
  display:none;
  width:44px;height:44px;
  border-radius:12px;
  border:1px solid rgba(18,30,79,0.18);
  background:rgba(255,255,255,0.75);
  backdrop-filter: blur(6px);
  align-items:center;
  justify-content:center;
}
.nav-toggle span{
  display:block;
  width:18px;height:2px;
  background:#121E4F;
  position:relative;
}
.nav-toggle span::before,
.nav-toggle span::after{
  content:"";
  position:absolute; left:0;
  width:18px;height:2px;
  background:#121E4F;
}
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }

/* Tablet portrait and below */
@media (max-width: 1024px){
  .topbar__links, .topbar__cta{ display:none; }
  .nav-toggle{ display:flex; }
  .topbar__nav{ gap:10px; }
  .topbar__nav.is-open .topbar__links,
  .topbar__nav.is-open .topbar__cta{
    display:flex;
  }
  .topbar__nav.is-open{
    position:absolute;
    top: 84px;
    right: 4vw;
    flex-direction:column;
    background: rgba(18,30,79,0.88);
    backdrop-filter: blur(10px);
    padding:14px;
    border-radius:16px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  }
  .topbar__nav.is-open a{ color:#fff; }
  .topbar__links{ flex-direction:column; align-items:flex-start; width: 240px; }
  .topbar__cta{ width: 100%; justify-content:flex-start; }
  .topbar__cta .btn{ width:100%; }
}


/* CTA equal buttons (v1.4.3) */
.cta .btn{ min-width:220px; }
@media (max-width: 520px){
  .cta{ flex-direction:column; }
  .cta .btn{ width:100%; min-width:0; }
}

/* Soft transitions (v1.4.3) */
.card{
  border:1px solid rgba(15,55,120,0.08);
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(10px);
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  /* subtle vignette to avoid hard seams */
  background: radial-gradient(900px 520px at 50% 55%, rgba(255,255,255,0.0), rgba(245,248,255,0.18) 70%, rgba(245,248,255,0.32) 100%);
}

/* Warteliste form fallback + spacing (v1.4.4) */
.iwki-alert{
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(18,30,79,0.14);
  background: rgba(255,255,255,0.86);
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
  color: #121E4F;
}

/* Waitlist hero override (v1.4.5) */
body.page-template-page-warteliste .hero{
  background:
    linear-gradient(90deg, rgba(245,248,255,0.98) 0%, rgba(245,248,255,0.88) 60%, rgba(245,248,255,0.98) 100%);
  background-size:cover;
  background-position:center center;
  padding-right:56px !important;
}
body.page-template-page-warteliste .hero::after{display:none;}


/* v1.4.6 – Waitlist single-column + background */
body.page-warteliste,
body.page-template-page-warteliste{
  background-image: url("../img/immo_ki_back.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
body.page-warteliste::before,
body.page-template-page-warteliste::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background: radial-gradient(circle at 50% 10%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.78) 38%, rgba(255,255,255,0.60) 68%, rgba(255,255,255,0.72) 100%);
  z-index:-1;
}

/* Warteliste: hero becomes centered single column, no image behind text */
body.page-warteliste .hero.hero--waitlist,
body.page-template-page-warteliste .hero.hero--waitlist{
  display:block;
  max-width: 760px;
  margin: 44px auto 22px;
  padding: 48px 56px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(15,55,120,0.08);
  border-radius: 22px;
  box-shadow: 0 12px 36px rgba(10,35,80,0.08);
  backdrop-filter: blur(6px);
}
body.page-warteliste .hero.hero--waitlist .hero__content--single,
body.page-template-page-warteliste .hero.hero--waitlist .hero__content--single{
  max-width: 100%;
}
body.page-warteliste .hero.hero--waitlist h1,
body.page-template-page-warteliste .hero.hero--waitlist h1{
  text-align: left;
}
body.page-warteliste .hero.hero--waitlist .cta-row,
body.page-template-page-warteliste .hero.hero--waitlist .cta-row{
  justify-content:flex-start;
}
body.page-warteliste .panel#form,
body.page-template-page-warteliste .panel#form{
  max-width: 760px;
  margin: 0 auto 56px;
  background: rgba(255,255,255,0.92);
  border-radius: 22px;
  border: 1px solid rgba(15,55,120,0.08);
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 36px rgba(10,35,80,0.08);
}
body.page-warteliste .panel#form .formbox,
body.page-template-page-warteliste .panel#form .formbox{
  background: transparent;
  border: none;
  padding: 0;
}

@media (max-width: 900px){
  body.page-warteliste .hero.hero--waitlist,
  body.page-template-page-warteliste .hero.hero--waitlist{
    padding: 44px 22px;
    margin: 28px auto 18px;
  }
  body.page-warteliste .panel#form,
  body.page-template-page-warteliste .panel#form{
    margin: 0 auto 40px;
    padding: 22px 18px;
  }
}

@media (max-width: 560px){
  body.page-warteliste .hero.hero--waitlist,
  body.page-template-page-warteliste .hero.hero--waitlist{
    padding: 38px 18px;
  }
}

/* Ensure the waitlist hero is always clean (no hero media layers) */
body.page-warteliste .hero.hero--waitlist,
body.page-template-page-warteliste .hero.hero--waitlist{
  background-image: none !important;
}
body.page-warteliste .hero.hero--waitlist::before,
body.page-template-page-warteliste .hero.hero--waitlist::before,
body.page-warteliste .hero.hero--waitlist::after,
body.page-template-page-warteliste .hero.hero--waitlist::after{
  display:none !important;
}

/* v1.4.6 – Infostart hero media hard-right + mask to remove dark edge */
.hero{
  /* push hero visual further to the right to hide any source-image edge */
  background-position: 112% 50%;
}
.hero::after{
  background-position: 112% 50%;
}
.hero::before{
  content:"";
  position:absolute;
  top:0; right:0; bottom:0;
  width: 120px;
  pointer-events:none;
  background: linear-gradient(90deg, rgba(245,248,255,0.00) 0%, rgba(245,248,255,0.85) 55%, rgba(245,248,255,1.00) 100%);
  z-index:1;
}
.hero__content{ position:relative; z-index:2; }

/* v1.4.8 – Responsive stacking + mobile nav + footer readability */

/* Ensure nav overlays content on mobile/tablet (no "menu behind cards") */
@media (max-width: 920px){
  .topbar{position:sticky; top:0; z-index:1000; backdrop-filter:none; -webkit-backdrop-filter:none;}
  .topbar__nav.is-open{z-index:1200; backdrop-filter:none; -webkit-backdrop-filter:none;}
  .topbar__links{z-index:1200;}
}

/* Hero: tablet/mobile layout is single-column, calm, and avoids visual collisions */
@media (max-width: 1100px){
  .hero{padding-right:72px; background-position: 108% 52%;}
  .hero::after{background-position: 108% 52%;}
}
@media (max-width: 920px){
  .hero{padding:56px 22px; background-position: 120% 52%;}
  .hero::after{background-position: 120% 52%; opacity:0.32;}
  .hero .cta{flex-direction:column; align-items:stretch;}
  .hero .btn{width:100%; justify-content:center;}
  .hero .grid{grid-template-columns:1fr;}
}
@media (max-width: 480px){
  .hero{padding:44px 18px;}
  .hero .h1{font-size:40px;}
}

/* Waitlist: single-column centered container; background stays on body, not inside hero */
@media (max-width: 920px){
  body.page-warteliste .hero.hero--waitlist,
  body.page-template-page-warteliste .hero.hero--waitlist{
    padding:44px 18px;
  }
  body.page-warteliste .hero__content--single,
  body.page-template-page-warteliste .hero__content--single{
    max-width: 720px;
    margin:0 auto;
  }
  .panel{padding:24px 16px;}
  .panel .waitlist-card{width:100%; max-width: 720px; margin:0 auto;}
}

/* Footer readability on bright background images */
@media (max-width: 920px){
  .site-footer{background:rgba(18,30,79,0.78); border-top:1px solid rgba(255,255,255,0.14);}
  .site-footer .footer-inner{flex-direction:column; gap:10px; align-items:center;}
  .site-footer .footer-right{justify-content:center;}
  .site-footer a{color:rgba(255,255,255,0.95);} 
}