/* =========================================================
   LMT Landingpage – Cassiopeia user.css
   ========================================================= */

/* If header is sticky, anchor scroll should not hide section titles */
.lmt-section { scroll-margin-top: 90px; }

/* Generic card rounding */
.lmt-card { border-radius: 1rem; }

/* HERO */
.lmt-hero .lmt-hero-card { border-radius: 1.25rem; }
.lmt-hero-bullets { font-size: 1.05rem; }
.lmt-hero-bullets > div { margin-bottom: .4rem; }

.lmt-kpi { display: grid; gap: .75rem; }
.lmt-kpi-item { padding: .6rem .75rem; border: 1px solid rgba(0,0,0,.08); border-radius: 1rem; background: rgba(0,0,0,.01); }
.lmt-kpi-title { font-weight: 700; letter-spacing: -0.01em; }

/* TRUST STRIP */
.lmt-trust-item {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 1rem;
  padding: 1rem;
  background: rgba(0,0,0,.01);
}
.lmt-trust-title { font-weight: 700; letter-spacing: -0.01em; }

/* HOW */
.lmt-step { border-radius: 1rem; }
.lmt-step-no {
  width: 2.2rem; height: 2.2rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  font-weight: 700;
  margin-bottom: .75rem;
}

/* SCREENSHOTS placeholder styling */
.lmt-shot { text-decoration: none; }
.lmt-shot-box {
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 1rem;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.02);
  color: rgba(0,0,0,.6);
  font-weight: 600;
}

/* PRICING */
.lmt-pricing .lmt-card { border-radius: 1rem; }
.lmt-pricing .lmt-card-featured { border: 2px solid rgba(13,110,253,.35); transform: translateY(-2px); }
.lmt-price { display:flex; align-items:baseline; gap:.5rem; }
.lmt-price-value { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.02em; }
.lmt-price-note { color: rgba(0,0,0,.55); }
.lmt-list { padding-left: 1.1rem; margin-bottom: 0; }
.lmt-list li { margin-bottom: .5rem; }
.lmt-badge { border-radius: 999px; }

/* CTA */
.lmt-cta-card {
  border-radius: 1.25rem;
  border: 1px solid rgba(0,0,0,.08);
  background: linear-gradient(180deg, rgba(13,110,253,.06), rgba(0,0,0,0));
}

/* DOWNLOAD */
.lmt-download .lmt-card { border-radius: 1rem; }
.lmt-download-hero {
  border: 1px solid rgba(0,0,0,.08);
  background: linear-gradient(180deg, rgba(13,110,253,.06), rgba(0,0,0,0));
}
.lmt-mini {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 1rem;
  padding: 1rem;
  background: rgba(255,255,255,.7);
}
.lmt-mini-title { font-weight: 700; margin-bottom: .5rem; }
.lmt-mini-list { padding-left: 1.1rem; margin: 0; }
.lmt-mini-list li { margin-bottom: .5rem; }

.lmt-changelog-item {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 1rem;
  padding: .9rem 1rem;
  margin-bottom: .75rem;
  background: rgba(0,0,0,.01);
}
.lmt-changelog-title { font-weight: 700; margin-bottom: .25rem; }

/* FOOTER */
.lmt-footer {
  border-top: 1px solid rgba(0,0,0,.1);
  background: rgba(0,0,0,.02);
}
.lmt-footer-title { font-weight: 800; font-size: 1.1rem; letter-spacing: -0.02em; margin-bottom: .5rem; }
.lmt-footer-heading { letter-spacing: .06em; color: rgba(0,0,0,.65); margin-bottom: .75rem; }
.lmt-footer-links li { margin-bottom: .45rem; }
.lmt-footer-links a, .lmt-footer-inline { text-decoration: none; }
.lmt-footer-links a:hover, .lmt-footer-inline:hover { text-decoration: underline; }

/* =========================================================
   LMT Screenshot Grid
   ========================================================= */

.com-content-article__body .lmt-page .lmt-screenshots .lmt-shot {
  display: block;
  text-decoration: none;
}

/* Thumbnail frame */
.com-content-article__body .lmt-page .lmt-shot-thumb {
  position: relative;
  aspect-ratio: 16 / 10;          /* 🔑 gleichmäßige Höhe */
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.02);
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Image inside */
.com-content-article__body .lmt-page .lmt-shot-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;              /* 🔑 kein Verzerren */
  display: block;
}

/* Hover effect */
.com-content-article__body .lmt-page .lmt-shot:hover .lmt-shot-thumb {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
}

/* Optional: subtle overlay icon */
.com-content-article__body .lmt-page .lmt-shot-thumb::after {
  content: "🔍";
  position: absolute;
  right: .6rem;
  bottom: .5rem;
  font-size: 1.1rem;
  opacity: .6;
}

/* =========================================================
   LMT – Helix-würdige Base Styles (template-agnostic)
   Scope: .lmt-page
   ========================================================= */

/* Base */
.lmt-page{
  --lmt-max: 1120px;
  --lmt-radius: 1.25rem;
  --lmt-radius-sm: .9rem;
  --lmt-border: rgba(0,0,0,.10);
  --lmt-muted: rgba(0,0,0,.62);
  --lmt-soft: rgba(0,0,0,.03);
  --lmt-shadow: 0 14px 40px rgba(0,0,0,.10);
  --lmt-shadow-sm: 0 8px 22px rgba(0,0,0,.10);
}

/* Make content feel like a landing page (nice reading width) */
.lmt-page .container{
  max-width: var(--lmt-max);
}

/* Typography polish */
.lmt-page h1, .lmt-page h2, .lmt-page h3{
  letter-spacing: -0.02em;
}
.lmt-page .lead{
  color: var(--lmt-muted);
}
.lmt-page p, .lmt-page li{
  color: rgba(0,0,0,.75);
}

/* Sections: consistent rhythm */
.lmt-page .lmt-section{
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}
@media (max-width: 575.98px){
  .lmt-page .lmt-section{
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

/* Subtle section divider without harsh lines */
.lmt-page .lmt-section + .lmt-section{
  position: relative;
}
.lmt-page .lmt-section + .lmt-section::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.08), transparent);
}

/* Cards: premium feel */
.lmt-page .card,
.lmt-page .lmt-card,
.lmt-page .lmt-hero-card{
  border-radius: var(--lmt-radius);
  border: 1px solid var(--lmt-border);
  box-shadow: none;
}
.lmt-page .card.shadow-sm,
.lmt-page .lmt-card.shadow-sm{
  box-shadow: var(--lmt-shadow-sm);
}
.lmt-page .lmt-hero-card{
  box-shadow: var(--lmt-shadow);
}

/* Buttons: more modern */
.lmt-page .btn{
  border-radius: 999px;
  padding-left: 1.1rem;
  padding-right: 1.1rem;
}
.lmt-page .btn-lg{
  padding: .8rem 1.35rem;
}

/* HERO: subtle gradient background */
.lmt-page .lmt-hero{
  background: radial-gradient(1200px 500px at 15% 0%, rgba(13,110,253,.10), transparent 55%),
              radial-gradient(900px 420px at 90% 15%, rgba(25,135,84,.08), transparent 55%);
}

/* Trust boxes */
.lmt-page .lmt-trust-item{
  border-radius: var(--lmt-radius);
  border: 1px solid var(--lmt-border);
  background: var(--lmt-soft);
}

/* Steps */
.lmt-page .lmt-step{
  border-radius: var(--lmt-radius);
}

/* Screenshots grid (works with your current HTML) */
.lmt-page .lmt-shot{
  display:block;
  text-decoration:none;
}
.lmt-page .lmt-shot-thumb{
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--lmt-radius);
  border: 1px solid var(--lmt-border);
  background: var(--lmt-soft);
  transition: transform .18s ease, box-shadow .18s ease;
}
.lmt-page .lmt-shot-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.lmt-page a.lmt-shot:hover .lmt-shot-thumb{
  transform: translateY(-2px);
  box-shadow: var(--lmt-shadow-sm);
}

/* Pricing highlight */
.lmt-page .lmt-card-featured{
  border: 2px solid rgba(13,110,253,.35) !important;
  transform: translateY(-2px);
}

/* FAQ accordion: soften */
.lmt-page .accordion-item{
  border-radius: var(--lmt-radius-sm);
  overflow: hidden;
  border: 1px solid var(--lmt-border);
  background: #fff;
  margin-bottom: .75rem;
}
.lmt-page .accordion-button{
  font-weight: 700;
}
.lmt-page .accordion-button:not(.collapsed){
  background: rgba(13,110,253,.06);
}

/* Footer */
.lmt-page .lmt-footer{
  border-top: 1px solid var(--lmt-border);
  background: rgba(0,0,0,.02);
}

.lmt-page .lmt-topbar{
  padding: .75rem 1rem;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px);
}
.lmt-page .lmt-brand{
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: rgba(0,0,0,.86);
}
.lmt-page .lmt-toplink{
  text-decoration: none;
  color: rgba(0,0,0,.70);
  font-weight: 600;
  padding: .35rem .55rem;
  border-radius: 999px;
}
.lmt-page .lmt-toplink:hover{
  background: rgba(0,0,0,.04);
  color: rgba(0,0,0,.86);
}


/* Screenshots: premium grid */
.lmt-page .lmt-shot-thumb{
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  transition: transform .18s ease, box-shadow .18s ease;
}
.lmt-page .lmt-shot-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform .25s ease;
}
.lmt-page a.lmt-shot:hover .lmt-shot-thumb{
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(0,0,0,.14);
}
.lmt-page a.lmt-shot:hover .lmt-shot-thumb img{
  transform: scale(1.05);
}

/* Caption overlay from data-lmt-caption */
.lmt-page a.lmt-shot{
  display:block;
  text-decoration:none;
}
.lmt-page a.lmt-shot::after{
  content: attr(data-lmt-caption);
  position: relative;
  display:block;
  margin-top: .5rem;
  color: rgba(0,0,0,.70);
  font-weight: 600;
  font-size: .95rem;
}

.lmt-page #lmtLightboxCap{
  border-top: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
}


/* Topbar – unscoped, damit sie sicher greift */
.lmt-topbar{
  padding: .75rem 1rem;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px);
}

.lmt-brand{
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: rgba(0,0,0,.86);
}

.lmt-toplink{
  text-decoration: none;
  color: rgba(0,0,0,.70);
  font-weight: 600;
  padding: .35rem .55rem;
  border-radius: 999px;
}

.lmt-toplink:hover{
  background: rgba(0,0,0,.04);
  color: rgba(0,0,0,.86);
}

#lmtLightboxCap{
  border-top: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
}
.lmt-hero-pills{ display:flex; flex-wrap:wrap; gap:.5rem; }
.lmt-pill{
  display:inline-flex; align-items:center;
  padding:.45rem .75rem;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.75);
  font-weight:600;
  color: rgba(0,0,0,.78);
  font-size:.95rem;
}

/* Topbar Links: Cassiopeia-Defaults sicher übersteuern */
.com-content-article__body .lmt-topbar a.lmt-brand,
.com-content-article__body .lmt-topbar a.lmt-toplink{
  text-decoration: none !important;
  color: rgba(0,0,0,.74) !important;
  font-weight: 600;
}

.com-content-article__body .lmt-topbar a.lmt-brand{
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(0,0,0,.86) !important;
}

.com-content-article__body .lmt-topbar a.lmt-toplink{
  padding: .35rem .55rem;
  border-radius: 999px;
}

.com-content-article__body .lmt-topbar a.lmt-toplink:hover{
  background: rgba(0,0,0,.04);
  color: rgba(0,0,0,.88) !important;
}

html { outline: 6px solid red !important; }

.page-header,
.com-content-article__title,
.com-content-article__info,
.article-info {
  display: none !important;
}

.lmt-metric{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 1.25rem;
  padding: 1rem;
  background: rgba(255,255,255,.65);
}
.lmt-metric-value{
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 1.6rem;
}
.lmt-metric-label{
  color: rgba(0,0,0,.62);
  font-weight: 600;
}

.lmt-card-featured{
  box-shadow: 0 18px 50px rgba(0,0,0,.14);
}

.lmt-faq-cta{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 1.25rem;
  padding: 1.5rem;
  background: rgba(0,0,0,.02);
}

/* Roadmap – Helix-like cards */
.lmt-roadmap-card{
  border-radius: 1.25rem;
  border: 1px solid rgba(0,0,0,.10);
}

.lmt-roadmap-title{
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 1.2rem;
}

.lmt-roadmap-badge{
  border-radius: 999px;
  font-weight: 700;
}

.lmt-roadmap-list{
  padding-left: 1.1rem;
  margin: 0;
}
.lmt-roadmap-list li{
  margin-bottom: .55rem;
  color: rgba(0,0,0,.76);
}

/* Featured (Next) – subtle emphasis */
.lmt-roadmap-featured{
  border: 2px solid rgba(13,110,253,.35) !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
}

/* Download / Install */

.lmt-install{
  display: grid;
  gap: 1rem;
}

.lmt-install-step{
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: .75rem;
  align-items: flex-start;
}

.lmt-install-no{
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  background: rgba(255,255,255,.8);
}

/* Checklist */
.lmt-checklist{
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.lmt-checklist li{
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .6rem;
}
.lmt-checklist li::before{
  content: "✓";
  position: absolute;
  left: 0;
  color: #198754;
  font-weight: 900;
}

/* Safety note */
.lmt-safe-note{
  border: 1px solid rgba(25,135,84,.25);
  border-radius: 1rem;
  padding: .75rem 1rem;
  background: rgba(25,135,84,.06);
  font-size: .95rem;
}

/* Hero CTA note */
.lmt-cta-note{
  font-weight: 700;
  color: rgba(0,0,0,.62);
  font-size: .95rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.7);
}
@media (max-width: 575.98px){
  .lmt-cta-note{
    width: 100%;
    text-align: center;
  }
}

.lmt-hero .btn.btn-primary.btn-lg{
  box-shadow: 0 14px 36px rgba(13,110,253,.25);
}


/* Sticky Topbar (only inside landingpage content) */
.lmt-topbar{
  position: sticky;
  top: 12px;
  z-index: 999;
}

/* Wenn ein Template-Header überlappt: etwas mehr Abstand bei Ankern */
.lmt-section { scroll-margin-top: 120px; }

/*.lmt-topbar{ top: 50x; }

.lmt-topbar{
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}

/* OSS section subtle background */
.lmt-oss{
  background: rgba(0,0,0,.01);
}

.lmt-support-note{
  border: 1px solid rgba(13,110,253,.18);
  background: rgba(13,110,253,.06);
  border-radius: 1rem;
  padding: .75rem 1rem;
  font-size: .95rem;
}

/* Comparison */
.lmt-compare li{
  padding-left: 1.75rem;
  position: relative;
  margin-bottom: .65rem;
  color: rgba(0,0,0,.76);
}

.lmt-compare-good::before{
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: 900;
  color: #198754;
}

.lmt-compare-bad::before{
  content: "–";
  position: absolute;
  left: .15rem;
  font-weight: 900;
  color: rgba(220,53,69,.9);
}

.lmt-compare-featured{
  border: 2px solid rgba(25,135,84,.25) !important;
  background: rgba(25,135,84,.04);
}
.lmt-topbar{
  position: sticky;
  top: 12px;
  z-index: 1030;
  margin-bottom: 1.25rem;
}
.lmt-page .lmt-topbar{
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
}

.lmt-topbar{
  position: sticky;
  top: 12px;
  z-index: 1030;
  margin-bottom: 1.25rem;
}
.lmt-page .lmt-topbar{
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
}


/* Topbar active state */
.lmt-toplink.is-active{
  background: rgba(13,110,253,.12);
  color: rgba(13,110,253,1);
  font-weight: 800;
}


/* Sticky Topbar */
.lmt-topbar-wrap{
  position: sticky;
  top: 0;
  z-index: 2000;
  padding-top: .75rem;
  padding-bottom: .75rem;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px);
}

/* Optional: damit sie nicht "unter" Cassiopeia Header rutscht */
.header{
  z-index: 1500;
}

/* Sticky-Offset für Sprungmarken */
.lmt-page section,
.lmt-page [id] {
  scroll-margin-top: 40px; /* ~1cm */
}

.lmt-topbar .lmt-toplink.active {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 6px;
}