/* Meine Wohnung — Landing Page CSS
   Adapted from Wamocon/momentum_marketing_landingpage
   Brand palette: Deep Blue #1e40af / Sky #3b82f6 / Navy #0f172a
*/

html {
  font-size: 17px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar { display: none; }

/* ── Card hover / shimmer ── */
.card-hover {
  transition: border-color .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1), box-shadow .7s cubic-bezier(.16,1,.3,1);
}
.card-hover:hover {
  border-color: var(--color-border-hover);
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(0,0,0,.08), 0 0 0 1px rgba(30,64,175,.04);
}
.card-hover::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: skewX(-18deg);
  transition: left .7s ease;
  pointer-events: none;
  z-index: 4;
}
.card-hover:hover::after { left: 130%; }

/* ── Accent hover (blue glow line) ── */
.accent-hover { position: relative; }
.accent-hover::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(30,64,175,.35),transparent);
  opacity:0; transition:opacity .5s ease;
}
.accent-hover:hover::before { opacity:1; }
.accent-hover:hover {
  border-color: rgba(30,64,175,.18) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.08), 0 0 30px rgba(30,64,175,.06) !important;
}

/* ── Gradient text ── */
.gradient-text {
  background: linear-gradient(135deg, #1e40af, #3b82f6);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Reveal animation ── */
.reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal--visible { opacity: 1; transform: translateY(0); }

/* ── Nav ── */
.nav-scrolled {
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(30,64,175,.08);
}
.nav-links-pill {
  display:flex; align-items:center; gap:1px;
  background:rgba(0,0,0,.042); border:1px solid rgba(0,0,0,.07);
  border-radius:100px; padding:3px 5px;
}
.nav-link {
  position:relative; padding:5px 11px; border-radius:100px;
  font-size:.72rem; font-weight:500; color:var(--color-muted);
  transition:color .2s ease, background .2s ease;
  letter-spacing:.01em; white-space:nowrap; text-decoration:none;
}
.nav-link:hover { color:var(--color-text-main); background:rgba(0,0,0,.06); }
.nav-link--active { color:#1e3a8a !important; background:rgba(30,64,175,.08) !important; font-weight:600; }
.nav-scrolled .nav-link { color:var(--color-muted); }
.nav-scrolled .nav-link:hover { color:var(--color-text-main); background:rgba(0,0,0,.06); }
.nav-scrolled .nav-link--active { color:#1e3a8a !important; background:rgba(30,64,175,.08) !important; }

/* ── Ticker ── */
@keyframes ticker-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.ticker-item {
  display:inline-block; padding:0 3.5rem; font-size:1.05rem;
  font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.9);
}
.ticker-item::before { content:'\25C6'; margin-right:1.75rem; color:#3b82f6; font-size:.7rem; vertical-align:middle; }

/* ── Gradient Orbs (blue palette) ── */
.gradient-orbs { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.orb { position:absolute; border-radius:50%; filter:blur(100px); will-change:transform; }
.orb--1 { width:600px; height:600px; background:#1e40af; opacity:.05; top:5%; left:10%; animation:orb-drift-1 25s ease-in-out infinite; }
.orb--2 { width:500px; height:500px; background:#7c3aed; opacity:.04; top:40%; right:5%; animation:orb-drift-2 30s ease-in-out infinite; }
.orb--3 { width:450px; height:450px; background:#1e40af; opacity:.035; bottom:15%; left:50%; animation:orb-drift-3 22s ease-in-out infinite; }
@keyframes orb-drift-1 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(80px,-50px) scale(1.15)} 66%{transform:translate(-40px,60px) scale(.9)} }
@keyframes orb-drift-2 { 0%,100%{transform:translate(0,0) scale(1)} 40%{transform:translate(-60px,40px) scale(1.1)} 70%{transform:translate(50px,-70px) scale(.85)} }
@keyframes orb-drift-3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-80px,-50px) scale(1.2)} }

/* ── FAQ ── */
.faq-answer { max-height:0; overflow:hidden; transition:max-height .28s cubic-bezier(.4,0,.2,1); }
.faq-item--open .faq-answer { max-height:600px; transition:max-height .5s cubic-bezier(.16,1,.3,1); }
.faq-item--open { border-color:rgba(30,64,175,.15) !important; box-shadow:0 4px 24px rgba(30,64,175,.04); background:rgba(30,64,175,.02); }
.faq-item { border-bottom:1px solid var(--color-border); }
.faq-item:first-child { border-top:1px solid var(--color-border); }
.faq-question__icon::before,.faq-question__icon::after {
  content:''; position:absolute; background:var(--color-muted); border-radius:2px;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.faq-question__icon::before { width:14px; height:2px; top:50%; left:50%; transform:translate(-50%,-50%); }
.faq-question__icon::after { width:2px; height:14px; top:50%; left:50%; transform:translate(-50%,-50%); }
.faq-item--open .faq-question__icon::after { transform:translate(-50%,-50%) rotate(90deg); opacity:0; }

/* ── Roadmap (Timeline) ── */
.rm { position:relative; max-width:940px; margin:0 auto; padding:60px 0 40px; }
.rm__line { position:absolute; left:50%; top:0; bottom:0; width:120px; transform:translateX(-50%); overflow:visible; pointer-events:none; }
.rm__line svg { position:absolute; top:0; left:50%; transform:translateX(-50%); width:120px; height:100%; }
.rm__line-bg { fill:none; stroke:rgba(255,255,255,.1); stroke-width:3; stroke-linecap:round; }
.rm__line-progress { fill:none; stroke:url(#rmGradient); stroke-width:3; stroke-linecap:round; }
.rm__line-glow {
  position:absolute; left:50%; width:23px; height:40px; border-radius:50%;
  background:radial-gradient(circle,rgba(30,64,175,.7),transparent 70%);
  filter:blur(8px); top:0; pointer-events:none; z-index:1; opacity:0; transform:translateX(-50%);
}
.rm__row { display:grid; grid-template-columns:1fr 80px 1fr; position:relative; }
.rm__row + .rm__row { margin-top:48px; }
.rm__center { display:flex; justify-content:center; position:relative; padding-top:20px; }
.rm__dot {
  width:18px; height:18px; border-radius:50%;
  background:rgba(255,255,255,.08); border:3px solid rgba(255,255,255,.15);
  position:relative; z-index:3; transition:all .6s cubic-bezier(.16,1,.3,1); flex-shrink:0;
}
.rm__dot--active {
  background:#1e40af; border-color:#3b82f6;
  box-shadow:0 0 20px rgba(30,64,175,.55), 0 0 40px rgba(30,64,175,.18); transform:scale(1.4);
}
.rm__dot--active::after {
  content:''; position:absolute; inset:-8px; border-radius:50%;
  border:2px solid rgba(59,130,246,.3); animation:rm-pulse 2s ease-out infinite;
}
@keyframes rm-pulse { 0%{transform:scale(.8);opacity:.7} 100%{transform:scale(1.8);opacity:0} }
.rm__branch { position:absolute; top:28px; height:2px; background:rgba(255,255,255,.1); transition:background .6s ease,box-shadow .6s ease; border-radius:1px; }
.rm__branch--l { right:calc(50% + 9px); left:0; }
.rm__branch--r { left:calc(50% + 9px); right:0; }
.rm__branch--active { background:#1e40af; box-shadow:0 0 10px rgba(30,64,175,.3); }
.rm__card {
  padding:28px; border-radius:16px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08); opacity:0;
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),border-color .5s ease,box-shadow .5s ease;
}
.rm__card--l { transform:translateX(-40px); text-align:right; }
.rm__card--r { transform:translateX(40px); }
.rm__card--active {
  opacity:1 !important; transform:translateX(0) !important;
  border-color:rgba(30,64,175,.2); box-shadow:0 8px 32px rgba(0,0,0,.3), 0 0 30px rgba(30,64,175,.06);
}
.rm__label {
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:#3b82f6; background:rgba(59,130,246,.1);
  padding:3px 10px; border-radius:6px; margin-bottom:10px;
}
.rm__title { font-size:1.2rem; font-weight:700; margin-bottom:6px; letter-spacing:-.01em; color:#f0f0f2; }
.rm__desc { font-size:.875rem; color:#9999a1; line-height:1.7; margin-bottom:14px; }
.rm__tags { display:flex; flex-wrap:wrap; gap:6px; }
.rm__card--l .rm__tags { justify-content:flex-end; }
.rm__tag {
  font-size:11px; padding:3px 10px; border-radius:20px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  color:#8e8e96; font-weight:500;
}
.rm__end { display:flex; justify-content:center; padding-top:64px; position:relative; z-index:3; }
.rm__end-marker { display:flex; flex-direction:column; align-items:center; gap:12px; opacity:0; transform:translateY(20px); transition:all .7s cubic-bezier(.16,1,.3,1); }
.rm__end-marker--active { opacity:1; transform:translateY(0); }
.rm__end-ring {
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.12); transition:all .7s cubic-bezier(.16,1,.3,1);
}
.rm__end-marker--active .rm__end-ring {
  background:linear-gradient(135deg,#1e40af,#3b82f6); border-color:transparent;
  box-shadow:0 0 30px rgba(30,64,175,.5), 0 0 60px rgba(30,64,175,.15);
}
.rm__end-ring svg { color:rgba(255,255,255,.2); transition:color .6s ease; }
.rm__end-marker--active .rm__end-ring svg { color:#fff; }
.rm__end-label { font-size:.875rem; font-weight:600; color:rgba(255,255,255,.15); transition:color .7s ease; letter-spacing:.02em; }
.rm__end-marker--active .rm__end-label { color:#f0f0f2; }

/* ── Marquee ── */
.marquee {
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track { display:flex; gap:12px; width:max-content; animation:marquee-scroll 30s linear infinite; }
.marquee:hover .marquee__track { animation-play-state:paused; }
@keyframes marquee-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ── Back to Top ── */
.back-to-top {
  position:fixed; bottom:2rem; right:2rem; z-index:900; width:44px; height:44px;
  border-radius:50%; background:#1e40af; color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(30,64,175,.35);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s ease, visibility .3s ease, transform .3s ease, background .25s ease;
}
.back-to-top:hover { background:#1e3a8a; transform:translateY(-2px); box-shadow:0 6px 28px rgba(30,64,175,.45); }
.back-to-top--visible { opacity:1; visibility:visible; transform:translateY(0); }

/* ── Section styles ── */
section { background:var(--color-bg); position:relative; z-index:1; }
.section-alt { background:var(--color-bg-alt); }
.section-dark { background:#0a0f1e; color:#f0f0f2; }
.section-dark h2,.section-dark h3 { color:#f0f0f2; }
.section-dark .card-hover { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }
.section-dark .card-hover:hover { border-color:rgba(30,64,175,.25); box-shadow:0 16px 48px rgba(0,0,0,.3), 0 0 30px rgba(30,64,175,.08); }
.section-glow { position:relative; overflow:hidden; }
.section-glow::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:800px; height:600px; background:radial-gradient(circle,rgba(30,64,175,.06) 0%,transparent 60%); pointer-events:none;
}
.divider-gradient { height:120px; position:relative; z-index:2; pointer-events:none; margin-top:-1px; margin-bottom:-1px; }

/* ── Hamburger mobile ── */
.nav-hamburger { display:none; flex-direction:column; justify-content:center; gap:5px; cursor:pointer; padding:8px; border:none; background:transparent; z-index:51; }
@media (max-width:767px) { .nav-hamburger { display:flex; } }
.nav-hamburger span { display:block; width:22px; height:2px; background:var(--color-text-main); border-radius:2px; transition:transform .35s cubic-bezier(.16,1,.3,1), opacity .25s ease; }
.nav-hamburger.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity:0; transform:translateX(-6px); }
.nav-hamburger.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

#mobileMenu {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:fixed; inset:0; z-index:50; background:rgba(4,8,24,.97);
  backdrop-filter:saturate(160%) blur(24px); visibility:hidden; opacity:0;
  pointer-events:none; transition:opacity .28s ease, visibility .28s;
}
#mobileMenu.is-open { visibility:visible; opacity:1; pointer-events:auto; }
.mm-brand { font-size:1.35rem; font-weight:800; letter-spacing:-.04em; background:linear-gradient(135deg,#1e40af,#3b82f6); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:28px; }
.mm-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:calc(100% - 48px); max-width:340px; }
.mm-link { font-size:.95rem; font-weight:600; color:rgba(255,255,255,.75); text-decoration:none; padding:14px 12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:12px; text-align:center; transition:color .2s, background .2s, border-color .2s, transform .15s; }
.mm-link:hover { color:#fff; background:rgba(30,64,175,.14); border-color:rgba(30,64,175,.3); transform:scale(1.03); }

/* ── Roadmap Mobile ── */
@media (max-width: 767px) {
  .rm { padding: 40px 0 20px; }
  .rm__row { grid-template-columns: 40px 1fr; }
  .rm__cell--hide { display: none; }
  .rm__card--l { transform: translateX(20px); text-align: left; }
  .rm__card--r { transform: translateX(20px); }
  .rm__card--l.rm__card--active { transform: translateX(0); }
  .rm__card--r.rm__card--active { transform: translateX(0); }
  .rm__card--l .rm__tags { justify-content: flex-start; }
  .rm__branch--l { display: none; }
  .rm__branch--r { left: calc(100% + 9px); right: initial; width: 20px; }
  .rm__center { justify-content: flex-start; padding-left: 11px; }
  .rm__line { left: 20px; transform: none; }
  .rm__end { justify-content: flex-start; padding-left: 20px; }
}

/* ── Cookie Banner ── */
.cookie-banner {
  position:fixed; bottom:1.5rem; left:1.5rem; max-width:340px; z-index:800;
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:16px; padding:18px 20px; box-shadow:0 20px 60px rgba(0,0,0,.15);
  transform:translateY(20px); opacity:0; visibility:hidden; transition:all .4s cubic-bezier(.16,1,.3,1);
}
.cookie-banner--visible { transform:translateY(0); opacity:1; visibility:visible; }
.cookie-banner__btn { font-size:.8rem; font-weight:700; padding:8px 16px; border-radius:8px; border:none; cursor:pointer; transition:all .2s ease; font-family:inherit; }
.cookie-banner__btn--accept { background:#1e40af; color:#fff; }
.cookie-banner__btn--accept:hover { background:#1e3a8a; }
.cookie-banner__btn--reject { background:var(--color-bg-alt); color:var(--color-muted); }
.cookie-banner__btn--reject:hover { background:var(--color-border); }

/* ── Language toggle ── */
#langToggle { font-size:.72rem; font-weight:700; letter-spacing:.08em; padding:5px 12px; border-radius:100px; border:1px solid rgba(30,64,175,.25); background:rgba(30,64,175,.06); color:#1e40af; cursor:pointer; transition:all .2s; }
#langToggle:hover { background:rgba(30,64,175,.12); border-color:rgba(30,64,175,.4); }

/* ── Pricing cards ── */
.pricing-card {
  padding:2rem; border-radius:20px; border:1px solid var(--color-border);
  background:var(--color-surface); position:relative; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pricing-card:hover { transform:translateY(-4px); box-shadow:0 20px 60px rgba(0,0,0,.1); }
.pricing-card--popular {
  border-color:rgba(30,64,175,.4);
  background:linear-gradient(160deg,rgba(30,64,175,.04) 0%,var(--color-surface) 60%);
  box-shadow:0 12px 48px rgba(30,64,175,.12);
}
.pricing-badge {
  display:inline-block; font-size:.65rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; padding:3px 10px; border-radius:20px;
  background:linear-gradient(135deg,#1e40af,#3b82f6); color:#fff; margin-bottom:1rem;
}
.pricing-feature { display:flex; align-items:center; gap:10px; font-size:.85rem; margin-bottom:.55rem; color:var(--color-muted); }
.pricing-feature svg { flex-shrink:0; color:#1e40af; }

/* ── Legal section + Made in Germany badge ── */
.made-germany-badge {
  display:inline-flex;
  align-items:center;
  gap:14px;
  background:#fff;
  border:1px solid rgba(15,23,42,.12);
  border-radius:999px;
  padding:8px 22px 8px 10px;
  box-shadow:0 12px 26px rgba(15,23,42,.12), 0 1px 0 rgba(255,255,255,.9) inset;
  color:#1c3556;
  font-weight:700;
  font-size:clamp(1rem,2.8vw,2rem);
  letter-spacing:.01em;
}
.made-germany-badge__icon {
  width:56px;
  height:56px;
  border-radius:50%;
  background:#fff;
  border:1px solid rgba(15,23,42,.18);
  object-fit:cover;
  flex-shrink:0;
}
.made-germany-badge--footer {
  background:rgba(255,255,255,.94);
  box-shadow:0 10px 24px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.95) inset;
  font-size:1rem;
  padding:6px 16px 6px 8px;
  margin-bottom:4px;
}
.made-germany-badge--footer .made-germany-badge__icon {
  width:40px;
  height:40px;
}

.legal-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin:0 0 22px;
}
.legal-tab {
  border:1px solid rgba(30,64,175,.22);
  background:#fff;
  color:#1e3a8a;
  border-radius:999px;
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.01em;
  padding:10px 16px;
  cursor:pointer;
  transition:all .2s ease;
}
.legal-tab:hover { background:rgba(30,64,175,.06); }
.legal-tab--active {
  background:#1e40af;
  color:#fff;
  border-color:#1e40af;
  box-shadow:0 10px 24px rgba(30,64,175,.22);
}

.legal-panel {
  display:none;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:22px;
  padding:26px;
  box-shadow:0 18px 46px rgba(15,23,42,.08);
}
.legal-panel--active { display:block; }
.legal-lang { display:none; }
body[data-lang='de'] .legal-lang--de { display:block; }
body[data-lang='en'] .legal-lang--en { display:block; }

.legal-panel h3 {
  font-size:1.4rem;
  font-weight:800;
  color:#0f172a;
  margin-bottom:12px;
}
.legal-panel h4 {
  font-size:1rem;
  font-weight:700;
  color:#1e3a8a;
  margin:18px 0 6px;
}
.legal-panel p {
  color:#334155;
  font-size:.92rem;
  line-height:1.75;
}
.legal-source-link {
  color:#1e40af;
  font-weight:700;
  text-decoration:none;
  border-bottom:1px solid rgba(30,64,175,.35);
}
.legal-source-link:hover { color:#1e3a8a; border-bottom-color:#1e3a8a; }

/* ── Standalone legal pages ── */
body[data-lang='de'] .lang-en { display:none; }
body[data-lang='en'] .lang-de { display:none; }
body[data-lang='de'] .lang-de { display:block; }
body[data-lang='en'] .lang-en { display:block; }

.legal-page-main {
  min-height:100vh;
  padding:140px 0 80px;
  background:linear-gradient(180deg,#f4f7fd 0%, #eef3fb 100%);
}
.legal-page-wrap {
  max-width:980px;
  margin:0 auto;
  padding:0 20px;
}
.legal-page-head {
  text-align:center;
  margin-bottom:26px;
}
.legal-page-head h1 {
  font-size:clamp(2rem, 4.6vw, 3.2rem);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.02em;
  margin:0 0 8px;
}
.legal-page-head p {
  color:#475569;
  font-size:.95rem;
}
.legal-content-card {
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:20px;
  padding:28px;
  box-shadow:0 20px 52px rgba(15,23,42,.1);
}
.legal-content-card h2 {
  font-size:1.25rem;
  color:#0f172a;
  font-weight:800;
  margin:0 0 12px;
}
.legal-content-card h3 {
  font-size:1rem;
  color:#1e3a8a;
  font-weight:700;
  margin:18px 0 7px;
}
.legal-content-card p,
.legal-content-card li {
  color:#334155;
  font-size:.93rem;
  line-height:1.75;
}
.legal-content-card ul {
  margin:0;
  padding-left:22px;
}

@media (max-width: 767px) {
  .legal-page-main { padding:122px 0 56px; }
  .legal-content-card { padding:18px; border-radius:14px; }
}

@media (max-width:767px) {
  .made-germany-badge {
    gap:10px;
    padding:7px 16px 7px 8px;
    font-size:1.22rem;
  }
  .made-germany-badge__icon {
    width:48px;
    height:48px;
  }
  .legal-panel { padding:18px; border-radius:16px; }
}

/* ── Notification pulse ── */
@keyframes notif-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.3)} }

/* ── Typing cursor ── */
.typing-cursor { display:inline-block; width:3px; height:.75em; background:#3b82f6; margin-left:2px; vertical-align:baseline; -webkit-text-fill-color:initial; animation:blink-cursor .7s step-end infinite; }
@keyframes blink-cursor { 0%,100%{opacity:1} 50%{opacity:0} }