/* Kompetenzkompass — Landing Page CSS
   Adapted from Wamocon/meine_wohnung_lp template
   Brand palette: Moss #294f3f / Rust #9a3412 / Ink #122620 / Canvas #f5f0e7 / Fog #e9dfcf
*/

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(41,79,63,.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 (moss 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(41,79,63,.35),transparent);
  opacity:0; transition:opacity .5s ease;
}
.accent-hover:hover::before { opacity:1; }
.accent-hover:hover {
  border-color: rgba(41,79,63,.18) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.08), 0 0 30px rgba(41,79,63,.06) !important;
}

/* ── Gradient text ── */
.gradient-text {
  background: linear-gradient(135deg, #294f3f, #9a3412);
  -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(245,240,231,.82) !important;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(41,79,63,.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:#1d3a2f !important; background:rgba(41,79,63,.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:#1d3a2f !important; background:rgba(41,79,63,.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:#9a3412; font-size:.7rem; vertical-align:middle; }

/* ── Gradient Orbs (warm 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:#294f3f; opacity:.05; top:5%; left:10%; animation:orb-drift-1 25s ease-in-out infinite; }
.orb--2 { width:500px; height:500px; background:#9a3412; opacity:.04; top:40%; right:5%; animation:orb-drift-2 30s ease-in-out infinite; }
.orb--3 { width:450px; height:450px; background:#294f3f; 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(41,79,63,.15) !important; box-shadow:0 4px 24px rgba(41,79,63,.04); background:rgba(41,79,63,.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(41,79,63,.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:#294f3f; border-color:#9a3412;
  box-shadow:0 0 20px rgba(41,79,63,.55), 0 0 40px rgba(41,79,63,.18); transform:scale(1.4);
}
.rm__dot--active::after {
  content:''; position:absolute; inset:-8px; border-radius:50%;
  border:2px solid rgba(154,52,18,.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:#294f3f; box-shadow:0 0 10px rgba(41,79,63,.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(41,79,63,.2); box-shadow:0 8px 32px rgba(0,0,0,.3), 0 0 30px rgba(41,79,63,.06);
}
.rm__label {
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:#9a3412; background:rgba(154,52,18,.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,#294f3f,#9a3412); border-color:transparent;
  box-shadow:0 0 30px rgba(41,79,63,.5), 0 0 60px rgba(41,79,63,.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; }

/* ── Back to Top ── */
.back-to-top {
  position:fixed; bottom:2rem; right:2rem; z-index:900; width:44px; height:44px;
  border-radius:50%; background:#294f3f; color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(41,79,63,.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:#1d3a2f; transform:translateY(-2px); box-shadow:0 6px 28px rgba(41,79,63,.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:#122620; 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(41,79,63,.25); box-shadow:0 16px 48px rgba(0,0,0,.3), 0 0 30px rgba(41,79,63,.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(41,79,63,.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(18,38,32,.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,#294f3f,#9a3412); -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(41,79,63,.14); border-color:rgba(41,79,63,.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:#294f3f; color:#fff; }
.cookie-banner__btn--accept:hover { background:#1d3a2f; }
.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(41,79,63,.25); background:rgba(41,79,63,.06);
  color:#294f3f; cursor:pointer; transition:all .2s;
}
#langToggle:hover { background:rgba(41,79,63,.12); border-color:rgba(41,79,63,.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(41,79,63,.4);
  background:linear-gradient(160deg,rgba(41,79,63,.04) 0%,var(--color-surface) 60%);
  box-shadow:0 12px 48px rgba(41,79,63,.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,#294f3f,#9a3412); 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:#294f3f; }
.pricing-card--disabled {
  filter: grayscale(1);
  opacity: .62;
  border-color: rgba(18,38,32,.12) !important;
  background: #f3eee5;
}
.pricing-card--disabled:hover {
  transform: none;
  box-shadow: none;
}
.pricing-unavailable {
  display: inline-block;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  margin-bottom: .9rem;
  color: #6b665c;
  background: rgba(18,38,32,.08);
  border: 1px solid rgba(18,38,32,.14);
}

/* ── Trust cards ── */
.trust-card {
  padding:1.5rem; border-radius:16px; background:var(--color-surface);
  border:1px solid var(--color-border); transition:transform .3s ease, box-shadow .3s ease;
}
.trust-card:hover { transform:translateY(-2px); box-shadow:0 12px 40px rgba(0,0,0,.08); }

/* ── Typing cursor ── */
.typing-cursor { display:inline-block; width:3px; height:.75em; background:#9a3412; 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} }