/* =========================================================
   CausaNova – Tenant CSS (Navbar + Landing + Generic Page)
   v2025-08-30b  (slice scroll + compare table)
   Notes:
   - Keep this file as the LAST stylesheet so it wins.
   - Dark mode toggles via: html[data-theme="dark"]
   - Navbar dropdowns are pure CSS (hover/focus), mobile uses .main-navbar.is-open
========================================================= */

/* ---------- Design Tokens (light) ---------- */
:root {
    --font-sans: 'Inter','Segoe UI',-apple-system,BlinkMacSystemFont,'Roboto','Open Sans','Noto Sans',system-ui,sans-serif;
    --radius: .8rem;
    --radius-lg: 1.1rem;
    --radius-xl: 1.6rem;
    --shadow-sm: 0 2px 8px rgba(3,23,70,.06);
    --shadow: 0 8px 28px rgba(3,23,70,.12),0 2px 8px rgba(3,23,70,.06);
    --shadow-strong: 0 18px 60px rgba(3,23,70,.18);
    --bg: #f7f9fc;
    --panel: #fff;
    --panel-soft: #f2f6ff;
    --panel-2: #f1f4fb;
    --text: #0a214f;
    --muted: #5a6a92;
    --border: #dfe6f3;
    --brand: #0b4dd9;
    --brand-600: #0a3fb3;
    --brand-700: #0a3fb3;
    --brand-800: #081f66;
    --brand-900: #082e8a;
    --accent: var(--brand);
    --accent-hover: var(--brand-600);
    --accent-ghost: rgba(255,255,255,.12);
    --brand-logo-size: 28px;
    --content-max: 1240px;
    --prose-max: 960px;
}

html[data-theme='dark'] {
    --bg: #0a1024;
    --panel: #0f1630;
    --panel-soft: #0d132a;
    --panel-2: #0b1635;
    --text: #e8eefc;
    --muted: #93a4d4;
    --border: #22305a;
    --brand: #7aa3ff;
    --brand-600: #5689ff;
    --brand-700: #3f6be0;
    --brand-800: #2a4ab2;
    --brand-900: #cfe0ff;
    --accent: var(--brand);
    --accent-hover: var(--brand-600);
    --accent-ghost: rgba(122,163,255,.14);
}

/* ---------- Base ---------- */
* {
    box-sizing: border-box
}

html, body {
    height: 100%
}

body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--bg);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

img {
    max-width: 100%;
    height: auto;
    display: block
}

a {
    color: inherit;
    text-decoration: none
}

.container {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 clamp(16px,2.5vw,24px)
}

.page {
    min-height: unset
}

.full-bleed {
    position: relative;
    width: 100%
}

.section-block {
    margin: clamp(2.2rem,6vw,4rem) 0
}

.section-title {
    max-width: var(--prose-max);
    margin: clamp(2.6rem,6vw,4rem) auto 1.2rem;
    text-align: center
}

h1, h2, h3, h4 {
    margin: .2rem 0 .6rem;
    font-weight: 800;
    letter-spacing: .2px;
    line-height: 1.1
}

h1 {
    font-size: clamp(1.9rem,3.6vw,3.2rem)
}

h2 {
    font-size: clamp(1.35rem,2.2vw,2rem)
}

h3 {
    font-size: clamp(1.05rem,1.6vw,1.25rem)
}

p {
    margin: .25rem 0 .9rem;
    color: var(--muted)
}

hr {
    border: 0;
    height: 1px;
    background: var(--border);
    margin: 1.2rem 0;
    border-radius: 999px
}

.small {
    font-size: .9rem;
    color: var(--muted)
}

.badge {
    font-size: .86rem
}

.eyebrow {
    font-size: .86rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .4px
}

@media (prefers-reduced-motion:reduce) {
    * {
        transition: none !important
    }
}

/* ---------- Navbar ---------- */
.main-navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 1rem;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    backdrop-filter: saturate(120%) blur(10px)
}

.brand-link {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .5rem .4rem 0
}

.brand-logo {
    height: var(--brand-logo-size,28px);
    width: auto;
    display: block
}

.nav-center, .nav-right {
    display: flex;
    align-items: center;
    gap: .8rem
}

.nav-link, .dropdown-toggle, .icon-btn {
    appearance: none;
    background: none;
    border: 0;
    font: inherit;
    color: var(--text);
    font-weight: 700;
    padding: .55rem .75rem;
    line-height: 1;
    border-radius: .55rem;
    border: 1px solid transparent;
    cursor: pointer
}

    .nav-link:hover, .dropdown-toggle:hover {
        background: var(--panel-2)
    }

.navbar-burger {
    display: none;
    margin-left: .25rem;
    padding: .55rem .6rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: .55rem
}

    .navbar-burger span {
        display: block;
        width: 20px;
        height: 2px;
        background: var(--text);
        margin: 4px 0;
        border-radius: 2px
    }

.nav-dropdown {
    position: relative
}

.dropdown-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 10px);
    min-width: 220px;
    padding: .35rem;
    border-radius: .8rem;
    background: var(--panel);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s ease,transform .15s ease,visibility 0s linear .15s;
    pointer-events: none
}

.dropdown-menu--right {
    right: 0;
    left: auto
}

.nav-dropdown:hover > .dropdown-menu, .nav-dropdown:focus-within > .dropdown-menu, .dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0s
}

.dropdown-item {
    display: block;
    padding: .6rem .7rem;
    border-radius: .55rem;
    color: var(--text)
}

    .dropdown-item:hover {
        background: var(--panel-2)
    }

.dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: .35rem .25rem;
    border-radius: 999px
}

.icon-btn.theme-toggle {
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: .6rem;
    width: 38px;
    height: 34px;
    display: grid;
    place-items: center;
    font-size: 16px
}

@media (max-width:980px) {
    .nav-center {
        display: none
    }

    .main-navbar.is-open .nav-center {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: .5rem 1rem 1rem;
        gap: .4rem;
        background: var(--panel);
        border-bottom: 1px solid var(--border)
    }

    .navbar-burger {
        display: inline-flex
    }

    .dropdown-menu {
        position: static;
        box-shadow: none;
        border-radius: .6rem;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto
    }
}

html[data-theme='dark'] .main-navbar {
    background: var(--panel)
}

html[data-theme='dark'] .dropdown-item:hover {
    background: color-mix(in oklab,var(--panel-soft) 65%,transparent)
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .8rem 1.05rem;
    border-radius: .7rem;
    font-weight: 800;
    letter-spacing: .2px;
    line-height: 1;
    border: 1px solid transparent;
    transition: transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease,border-color .15s;
    will-change: transform
}

.btn-primary {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 10px 24px rgba(11,77,217,.18)
}

    .btn-primary:hover {
        background: var(--accent-hover);
        transform: translateY(-1px)
    }

.btn-ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--brand-700)
}

    .btn-ghost:hover {
        background: var(--panel-2)
    }

.hero--pro .btn {
    backdrop-filter: saturate(140%) blur(4px)
}

.hero--pro .btn-ghost {
    border-color: rgba(255,255,255,.55);
    color: #fff;
    background: var(--accent-ghost)
}

    .hero--pro .btn-ghost:hover {
        background: rgba(255,255,255,.20);
        border-color: rgba(255,255,255,.8)
    }

.hero--pro .btn-primary {
    background: #fff;
    color: var(--brand-700);
    box-shadow: 0 14px 28px rgba(0,0,0,.22)
}

    .hero--pro .btn-primary:hover {
        background: #f5f8ff
    }

/* ---------- Hero ---------- */
.hero--pro {
    color: #fff;
    overflow: clip;
    isolation: isolate;
    padding-block: clamp(64px,8vw,92px);
    background: radial-gradient(1100px 600px at 10% -10%,rgba(255,213,85,.28),transparent 60%), radial-gradient(800px 500px at 130% 15%,rgba(11,77,217,.45),transparent 65%), linear-gradient(160deg,#06194a 0%,#0a2f8c 60%,#0b4dd9 115%);
}

html[data-theme="dark"] .hero--pro {
    background: radial-gradient(1100px 600px at 10% -10%,rgba(255,213,85,.2),transparent 60%),radial-gradient(800px 500px at 130% 15%,rgba(122,163,255,.28),transparent 65%),linear-gradient(160deg,#0a1027 0%,#0b1d57 60%,#103a9b 115%)
}

.hero--pro::after {
    content: "";
    position: absolute;
    inset: auto -18% -32% -18%;
    height: 52%;
    filter: blur(46px);
    opacity: .26;
    z-index: 0;
    background: radial-gradient(60% 60% at 50% 40%,#7aa3ff33 0%,transparent 70%)
}

.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(1.6rem,3.5vw,2.6rem);
    grid-template-columns: minmax(0,1.15fr) minmax(420px,560px);
    align-items: center;
    column-gap: clamp(18px,3vw,28px)
}

.hero-col--text {
    max-width: 720px;
    justify-self: start
}

    .hero-col--text .badge {
        display: inline-block;
        padding: .42rem .66rem;
        border-radius: 999px;
        font-weight: 800;
        letter-spacing: .25px;
        background: rgba(255,255,255,.14);
        border: 1px solid rgba(255,255,255,.32)
    }

.hero-title {
    margin: .6rem 0 .4rem;
    font-size: clamp(28px,3.2vw,44px);
    text-wrap: balance
}

.hero-sub {
    opacity: .95;
    margin: 0 0 1.1rem;
    font-size: clamp(15px,1.2vw,18px);
    max-width: 62ch
}

.cta-row {
    display: flex;
    gap: clamp(10px,1.5vw,14px);
    flex-wrap: wrap
}

.kpi-row {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: clamp(10px,1.4vw,16px);
    margin-top: 1rem
}

.kpi {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: .8rem;
    padding: .8rem .9rem;
    min-width: 180px
}

    .kpi .k {
        font-weight: 900;
        font-size: 1.2rem
    }

    .kpi .l {
        opacity: .9
    }

.hero-col--media {
    text-align: right;
    justify-self: end
}

.hero-illustration {
    width: min(560px,100%);
    aspect-ratio: 16/11;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.25);
    box-shadow: var(--shadow-strong);
    background: radial-gradient(80% 80% at 50% 35%,rgba(255,255,255,.12),transparent 60%)
}

@media (max-width:1200px) {
    .hero-grid {
        grid-template-columns: 1fr;
        row-gap: clamp(14px,2.5vw,20px)
    }

    .hero-col--media {
        order: 2;
        justify-self: center;
        text-align: center
    }

    .hero-illustration {
        width: min(560px,92%)
    }

    .kpi-row {
        grid-template-columns: 1fr 1fr
    }
}

/* ---------- Trust ---------- */
.trust {
    background: var(--panel);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border)
}

.trust-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(12px,2vw,20px);
    padding: 1.1rem 0
}

.logo-row {
    display: flex;
    gap: clamp(18px,2.4vw,28px);
    flex-wrap: wrap
}

    .logo-row .logo {
        height: 28px;
        opacity: .75;
        filter: grayscale(1);
        transition: .18s
    }

        .logo-row .logo:hover {
            opacity: 1;
            filter: none
        }

/* ---------- Grids & Cards ---------- */
.grid {
    display: grid;
    gap: clamp(14px,2.2vw,22px)
}

.grid-3 {
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr))
}

.grid-2 {
    grid-template-columns: repeat(auto-fit,minmax(360px,1fr))
}

.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: clamp(14px,1.6vw,18px)
}

.card-elevated {
    box-shadow: var(--shadow-strong)
}

.feature-card h3 {
    margin: .2rem 0 .2rem;
    line-height: 1.15
}

.feature-card p {
    color: var(--muted);
    margin-top: .2rem
}

.card-img-top {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: .8rem;
    box-shadow: var(--shadow);
    display: block
}

/* ---------- Steps (timeline) ---------- */
.steps {
    counter-reset: st;
    list-style: none;
    margin: 1.2rem auto;
    max-width: 840px;
    padding: 0
}

.step {
    position: relative;
    padding: .85rem .5rem .85rem 2.6rem;
    border-left: 2px solid var(--border)
}

    .step::before {
        counter-increment: st;
        content: counter(st);
        position: absolute;
        left: -.95rem;
        top: .72rem;
        width: 1.55rem;
        height: 1.55rem;
        border-radius: 999px;
        background: var(--accent);
        color: #fff;
        display: grid;
        place-items: center;
        font-weight: 900;
        font-size: .85rem;
        box-shadow: 0 6px 16px rgba(11,77,217,.25)
    }

/* ---------- Pricing ---------- */
.pricing .price {
    text-align: center;
    border: 1px solid var(--border);
    background: var(--panel);
    padding: 1.15rem;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: .6rem
}

.price .price-tag {
    font-size: 2.1rem;
    font-weight: 900;
    margin: .1rem 0 .5rem;
    color: var(--accent)
}

.price.price--featured {
    border: 0;
    background: linear-gradient(180deg,#ffffff 0%,#f5f8ff 100%);
    box-shadow: var(--shadow-strong);
    transform: translateY(-2px)
}

html[data-theme="dark"] .price.price--featured {
    background: linear-gradient(180deg,#102456 0%,#0d1a43 100%)
}

/* ---------- FAQ ---------- */
.faq .qa {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    padding: .7rem .9rem
}

    .faq .qa + .qa {
        margin-top: .7rem
    }

.faq summary {
    cursor: pointer;
    font-weight: 800;
    list-style: none
}

    .faq summary::-webkit-details-marker {
        display: none
    }

@media (min-width:1100px) {
    .faq .qa + .qa {
        margin-top: .9rem
    }
}

/* ---------- CTA bottom ---------- */
.cta-bottom {
    background: linear-gradient(180deg,#eef4ff 0%,rgba(255,255,255,0) 100%);
    border-top: 1px solid var(--border)
}

html[data-theme="dark"] .cta-bottom {
    background: linear-gradient(180deg,#0f1d46 0%,rgba(0,0,0,0) 100%)
}

.cta-bottom__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2.2rem 0;
    gap: 1rem
}

.cta-bottom__title {
    margin: 0
}

@media (max-width:980px) {
    .cta-bottom__inner {
        flex-direction: column;
        text-align: center
    }
}

/* ---------- Generic "Seite" quick access ---------- */
.cols-4 {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 1rem
}

@media (max-width:980px) {
    .cols-4 {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width:640px) {
    .cols-4 {
        grid-template-columns: 1fr
    }
}

.nav-card, .card.nav-card {
    min-height: 140px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    background: var(--panel);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: .6rem
}

    .card.nav-card .btn, .nav-card .btn {
        align-self: flex-start
    }

/* ---------- Hero <picture> helper ---------- */
.hero-illustration {
    display: block;
    border-radius: 1.2rem;
    overflow: hidden;
    box-shadow: var(--shadow-strong);
    border: 1px solid rgba(255,255,255,.25)
}

    .hero-illustration img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

/* =========================================================
   PAGE-LIKE SECTIONS (slices) with scroll-snap + reveal
   Usage:
   - Add `class: "slice section-block"` to each major <section>
   - (Optional) put `class: "snap-y"` on <body> to enable snapping.
========================================================= */
body.snap-y {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth
}

.slice {
    min-height: min(100vh,1100px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: block;
    padding-block: clamp(2rem,5vw,4rem)
}

.hero--pro.slice {
    min-height: 82vh;
    display: grid;
    align-content: center
}

/* Scroll-driven reveal (modern browsers) */
@keyframes fade-slide-in {
    from {
        opacity: 0;
        transform: translateY(22px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.slice > .container,
.slice .grid, .slice .steps, .slice .pricing, .slice .faq {
    view-timeline-name: --reveal;
    view-timeline-axis: block;
    animation-timeline: --reveal;
    animation-name: fade-slide-in;
    animation-duration: 1ms; /* timeline-controlled */
    animation-range: entry 10% cover 35%;
    animation-fill-mode: both;
}

@supports not (animation-timeline: auto) {
    /* Fallback: just ensure elements are visible */
    .slice > .container, .slice .grid, .slice .steps, .slice .pricing, .slice .faq {
        opacity: 1;
        transform: none
    }
}

/* =========================================================
   COMPARISON TABLE (No‑Code vs Low‑Code vs Custom Code)
   Markup: <div class="table-wrap"><table class="table compare"> …
========================================================= */
.table-wrap {
    max-width: var(--prose-max);
    margin: 0 auto;
    overflow: auto
}

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--panel);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    border-radius: 14px;
    overflow: hidden
}

    .table.compare thead th {
        background: linear-gradient(180deg,var(--panel-2),transparent);
        font-weight: 900
    }

    .table th, .table td {
        padding: .8rem 1rem;
        border-top: 1px solid var(--border);
        text-align: left;
        vertical-align: top
    }

    .table tr:first-child th, .table tr:first-child td {
        border-top: 0
    }

    .table thead th + th, .table td + td {
        border-left: 1px solid var(--border)
    }

    .table tbody tr:nth-child(odd) {
        background: color-mix(in oklab,var(--panel) 92%, #000 8%)
    }

html[data-theme='dark'] .table tbody tr:nth-child(odd) {
    background: color-mix(in oklab,var(--panel) 96%, #fff 4%)
}

.table .muted {
    color: var(--muted);
    font-size: .95em
}

/* Mobile: keep table usable */
@media (max-width:720px) {
    .table {
        font-size: .95rem
    }

        .table th, .table td {
            padding: .7rem .8rem
        }
}

/* =========================================================
   UTILITIES
========================================================= */
.center {
    margin-left: auto;
    margin-right: auto
}

.text-center {
    text-align: center
}

.mt-xl {
    margin-top: clamp(2rem,5vw,3.2rem)
}

.mb-xl {
    margin-bottom: clamp(2rem,5vw,3.2rem)
}


/* ==============================
   CausaNova – Tenant CSS (excerpt)
   Focus: snap sections + pretty comparison table
   ============================== */

/* --- Snap sections (page-by-page feeling) --- */
.snap-container {
  scroll-snap-type: y proximity;
}
.snap-section {
  scroll-snap-align: start;
  scroll-margin-top: 80px; /* leave room for sticky nav */
}
.snap-animate {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s ease, transform .35s ease;
}
.snap-animate.is-visible {
  opacity: 1;
  transform: none;
}

/* Intersection Observer helper (no-JS fallback is just visible) */
@media (prefers-reduced-motion: reduce) {
  .snap-animate { opacity: 1; transform: none; }
}

/* --- Section headings (centered + extra spacing) --- */
.section-title {
  text-align: center;
  margin: clamp(1.8rem, 4vw, 3rem) 0 1rem;
}

/* --- Comparison table (desktop) --- */
.table-scroll {
  overflow-x: auto;
}
.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.compare-table caption {
  text-align: left;
  padding: 0.9rem 1rem 0.3rem;
  font-weight: 800;
  color: var(--text);
}
.compare-table thead th {
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, color-mix(in oklab, var(--panel) 94%, #fff 6%), var(--panel));
  color: var(--text);
  font-weight: 800;
  text-align: left;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--border);
}
.compare-table th:first-child {
  border-top-left-radius: var(--radius-lg);
}
.compare-table th:last-child {
  border-top-right-radius: var(--radius-lg);
}
.compare-table td {
  padding: .85rem 1rem;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 90%, transparent);
  vertical-align: top;
}
.compare-table tbody tr:last-child td {
  border-bottom: 0;
}
.compare-table tbody tr:hover td {
  background: color-mix(in oklab, var(--panel) 92%, transparent);
}
.compare-table td:first-child {
  font-weight: 800;
  color: var(--text);
  width: 18rem;
  max-width: 40%;
  white-space: nowrap;
}

/* --- Comparison table (mobile -> stacked cards) --- */
@media (max-width: 720px) {
  .compare-table thead,
  .compare-table caption {
    display: none;
  }
  .compare-table,
  .compare-table tbody,
  .compare-table tr,
  .compare-table td {
    display: block;
    width: 100%;
  }
  .compare-table tr {
    margin: 0 0 .85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    background: var(--panel);
  }
  .compare-table td {
    padding: .8rem 1rem .65rem 7.5rem; /* room for the label */
    position: relative;
    border: 0;
    border-top: 1px dashed color-mix(in oklab, var(--border) 80%, transparent);
  }
  .compare-table td:first-child {
    padding: .9rem 1rem;
    font-weight: 900;
    color: var(--text);
    border: 0;
  }
  html[lang="de"] .compare-table td:not(:first-child)::before {
    content: attr(data-col-de);
  }
  html[lang="en"] .compare-table td:not(:first-child)::before {
    content: attr(data-col-en);
  }
  .compare-table td:not(:first-child)::before {
    position: absolute;
    left: 1rem;
    top: .8rem;
    width: 6.2rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
  }
}

/* Small polish for cards & grids to breathe a bit more */
.grid { gap: clamp(1rem, 2vw, 1.4rem); }
.card { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.section-block { margin: clamp(1.8rem, 5vw, 3.2rem) 0; }


/* ==============================
   CausaNova – Tenant CSS (excerpt)
   Focus: snap sections + pretty comparison table
   ============================== */

/* --- Snap sections (page-by-page feeling) --- */
.snap-container {
    scroll-snap-type: y proximity;
}

.snap-section {
    scroll-snap-align: start;
    scroll-margin-top: 80px; /* leave room for sticky nav */
}

.snap-animate {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .35s ease, transform .35s ease;
}

    .snap-animate.is-visible {
        opacity: 1;
        transform: none;
    }

/* Intersection Observer helper (no-JS fallback is just visible) */
@media (prefers-reduced-motion: reduce) {
    .snap-animate {
        opacity: 1;
        transform: none;
    }
}

/* --- Section headings (centered + extra spacing) --- */
.section-title {
    text-align: center;
    margin: clamp(1.8rem, 4vw, 3rem) 0 1rem;
}

/* --- Comparison table (desktop) --- */
.table-scroll {
    overflow-x: auto;
}

.compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

    .compare-table caption {
        text-align: left;
        padding: 0.9rem 1rem 0.3rem;
        font-weight: 800;
        color: var(--text);
    }

    .compare-table thead th {
        position: sticky;
        top: 0;
        background: linear-gradient(180deg, color-mix(in oklab, var(--panel) 94%, #fff 6%), var(--panel));
        color: var(--text);
        font-weight: 800;
        text-align: left;
        padding: .9rem 1rem;
        border-bottom: 1px solid var(--border);
    }

    .compare-table th:first-child {
        border-top-left-radius: var(--radius-lg);
    }

    .compare-table th:last-child {
        border-top-right-radius: var(--radius-lg);
    }

    .compare-table td {
        padding: .85rem 1rem;
        border-bottom: 1px solid color-mix(in oklab, var(--border) 90%, transparent);
        vertical-align: top;
    }

    .compare-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .compare-table tbody tr:hover td {
        background: color-mix(in oklab, var(--panel) 92%, transparent);
    }

    .compare-table td:first-child {
        font-weight: 800;
        color: var(--text);
        width: 18rem;
        max-width: 40%;
        white-space: nowrap;
    }

/* --- Comparison table (mobile -> stacked cards) --- */
@media (max-width: 720px) {
    .compare-table thead,
    .compare-table caption {
        display: none;
    }

    .compare-table,
    .compare-table tbody,
    .compare-table tr,
    .compare-table td {
        display: block;
        width: 100%;
    }

        .compare-table tr {
            margin: 0 0 .85rem;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow-sm);
            background: var(--panel);
        }

        .compare-table td {
            padding: .8rem 1rem .65rem 7.5rem; /* room for the label */
            position: relative;
            border: 0;
            border-top: 1px dashed color-mix(in oklab, var(--border) 80%, transparent);
        }

            .compare-table td:first-child {
                padding: .9rem 1rem;
                font-weight: 900;
                color: var(--text);
                border: 0;
            }

    html[lang="de"] .compare-table td:not(:first-child)::before {
        content: attr(data-col-de);
    }

    html[lang="en"] .compare-table td:not(:first-child)::before {
        content: attr(data-col-en);
    }

    .compare-table td:not(:first-child)::before {
        position: absolute;
        left: 1rem;
        top: .8rem;
        width: 6.2rem;
        font-weight: 700;
        color: var(--muted);
        white-space: nowrap;
    }
}

/* Small polish for cards & grids to breathe a bit more */
.grid {
    gap: clamp(1rem, 2vw, 1.4rem);
}

.card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.section-block {
    margin: clamp(1.8rem, 5vw, 3.2rem) 0;
}


/* =========================================================
   CausaNova – Tenant CSS (Landing One‑Pager)
   v2025‑08‑30c  —  compact, safe defaults, no hidden states
   This sheet deliberately avoids fancy reveal animations
   so nothing renders invisible accidentally.
========================================================= */

/* ---------- Tokens ---------- */
:root {
    --font-sans: Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Open Sans", "Noto Sans", system-ui, sans-serif;
    --radius: .85rem;
    --radius-lg: 1.2rem;
    --shadow: 0 10px 28px rgba(8,20,70,.14);
    --shadow-sm: 0 4px 16px rgba(8,20,70,.10);
    --bg: #f6f8fc;
    --panel: #ffffff;
    --panel-2: #eef3ff;
    --text: #0a214f;
    --muted: #5a6a92;
    --border: #dfe6f3;
    --brand: #0b4dd9;
    --brand-600: #0a3fb3;
}

html[data-theme='dark'] {
    --bg: #0a1024;
    --panel: #0f1630;
    --panel-2: #0b1635;
    --text: #e8eefc;
    --muted: #93a4d4;
    --border: #22305a;
    --brand: #7aa3ff;
    --brand-600: #5689ff;
}

* {
    box-sizing: border-box
}

html, body {
    height: 100%
}

body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

img {
    max-width: 100%;
    display: block
}

a {
    color: inherit;
    text-decoration: none
}

/* ---------- Layout helpers ---------- */
.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 clamp(16px,2.6vw,24px)
}

.section-block {
    margin: clamp(2.2rem,6vw,4rem) 0
}

.section-title {
    text-align: center;
    margin: clamp(2.6rem,6vw,4rem) auto 1rem;
    max-width: 960px
}

.grid {
    display: grid;
    gap: clamp(14px,2.2vw,22px)
}

.grid-2 {
    grid-template-columns: repeat(auto-fit,minmax(360px,1fr))
}

.grid-3 {
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr))
}

.grid-4 {
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr))
}

/* ---------- Cards ---------- */
.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: clamp(14px,1.6vw,18px)
}

.card-elevated {
    box-shadow: var(--shadow)
}

/* ---------- Top navigation (from landingpage.json) ---------- */
.topnav.sticky {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--panel);
    border-bottom: 1px solid var(--border)
}

.topnav .topnav-list {
    margin: 0;
    padding: .45rem clamp(10px,2vw,18px);
    display: flex;
    gap: .6rem;
    list-style: none;
    align-items: center;
    justify-content: flex-end
}

    .topnav .topnav-list a {
        display: inline-block;
        padding: .5rem .7rem;
        border-radius: .6rem;
        font-weight: 700
    }

        .topnav .topnav-list a:hover {
            background: color-mix(in oklab,var(--panel) 70%,#000 30%);
            background: var(--panel-2)
        }

/* ---------- Hero (uses `hero hero--gradient` + inner) ---------- */
.hero.hero--gradient {
    color: #fff;
    isolation: isolate;
    overflow: hidden;
    background: radial-gradient(1200px 600px at 10% -10%, rgba(255,213,85,.28), transparent 60%), radial-gradient(800px 500px at 130% 15%, rgba(11,77,217,.45), transparent 65%), linear-gradient(160deg,#06194a 0%,#0a2f8c 60%,#0b4dd9 115%);
}

html[data-theme='dark'] .hero.hero--gradient {
    background: radial-gradient(1200px 600px at 10% -10%, rgba(255,213,85,.20), transparent 60%), radial-gradient(800px 500px at 130% 15%, rgba(122,163,255,.28), transparent 65%), linear-gradient(160deg,#0a1027 0%,#0b1d57 60%,#103a9b 115%);
}

.hero .hero-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(64px,8vw,92px) clamp(16px,2.6vw,24px);
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(420px,560px);
    gap: clamp(18px,3vw,28px);
    align-items: center
}

@media (max-width:1100px) {
    .hero .hero-inner {
        grid-template-columns: 1fr
    }
}

.hero .hero-title {
    margin: .4rem 0 .3rem;
    font-weight: 900;
    font-size: clamp(28px,3.2vw,44px);
    text-wrap: balance
}

.hero .hero-subtitle {
    opacity: .96;
    margin: 0 0 1.1rem;
    max-width: 62ch
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .8rem 1.05rem;
    border: 1px solid transparent;
    border-radius: .75rem;
    font-weight: 800;
    letter-spacing: .2px;
    line-height: 1;
    transition: transform .15s ease, background .15s ease
}

.btn-primary {
    background: #fff;
    color: #14306b
}

html[data-theme='dark'] .btn-primary {
    color: #0b214f
}

.btn-primary:hover {
    transform: translateY(-1px);
    background: #f6f8ff
}

.btn-ghost {
    background: rgba(255,255,255,.14);
    color: #fff;
    border-color: rgba(255,255,255,.4)
}

    .btn-ghost:hover {
        background: rgba(255,255,255,.22)
    }

.btn-lg {
    padding: 1rem 1.25rem;
    border-radius: .9rem
}

/* ---------- Lists, code blocks ---------- */
ul.list {
    margin: .4rem 0 0 1.2rem;
    padding: 0
}

    ul.list li {
        margin: .25rem 0
    }

.code {
    font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    background: #0b1a3f;
    color: #e8eefc;
    border-radius: 1rem;
    padding: .9rem 1rem;
    overflow: auto;
    border: 1px solid #0d2b72
}

/* ---------- Steps ---------- */
.steps {
    counter-reset: st;
    list-style: none;
    max-width: 880px;
    margin: 0 auto;
    padding: 0
}

.steps-3 > li {
    position: relative;
    padding: .85rem .5rem .85rem 2.6rem;
    border-left: 2px solid var(--border)
}

    .steps-3 > li:before {
        counter-increment: st;
        content: counter(st);
        position: absolute;
        left: -.95rem;
        top: .72rem;
        width: 1.55rem;
        height: 1.55rem;
        border-radius: 999px;
        background: var(--brand);
        color: #fff;
        display: grid;
        place-items: center;
        font-weight: 900;
        font-size: .85rem;
        box-shadow: 0 6px 16px rgba(11,77,217,.25)
    }

/* ---------- Pricing ---------- */
.pricing-cards .price {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    border: 1px solid var(--border);
    background: var(--panel)
}

.price .price-tag {
    font-size: 2.1rem;
    font-weight: 900;
    margin: .1rem 0 .5rem;
    color: var(--brand)
}

.price.featured {
    box-shadow: var(--shadow);
    background: linear-gradient(180deg,#ffffff 0%,#f5f8ff 100%);
    transform: translateY(-2px)
}

html[data-theme='dark'] .price.featured {
    background: linear-gradient(180deg,#102456 0%,#0d1a43 100%)
}

/* ---------- KPI stats ---------- */
.kpis .stat {
    text-align: center
}

    .kpis .stat h2 {
        margin: .1rem 0
    }

/* ---------- Comparison table (works with `table.compare` + `table-basic`) ---------- */
.table-basic {
    max-width: 960px;
    margin: 0 auto
}

    .table-basic table, .table.compare {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: 1rem;
        box-shadow: var(--shadow);
        overflow: hidden
    }

        .table-basic thead th, .table.compare thead th {
            background: linear-gradient(180deg,var(--panel-2),transparent);
            font-weight: 900;
            text-align: left;
            padding: .85rem 1rem;
            border-bottom: 1px solid var(--border);
            position: sticky;
            top: 0
        }

        .table-basic th, .table-basic td, .table.compare th, .table.compare td {
            padding: .8rem 1rem;
            text-align: left;
            vertical-align: top;
            border-top: 1px solid var(--border)
        }

        .table-basic tr:first-child th, .table-basic tr:first-child td,
        .table.compare tr:first-child th, .table.compare tr:first-child td {
            border-top: 0
        }

        .table-basic td + td, .table-basic th + th, .table.compare td + td, .table.compare th + th {
            border-left: 1px solid var(--border)
        }

        .table-basic tbody tr:nth-child(odd), .table.compare tbody tr:nth-child(odd) {
            background: color-mix(in oklab,var(--panel) 92%,#000 8%)
        }

html[data-theme='dark'] .table-basic tbody tr:nth-child(odd),
html[data-theme='dark'] .table.compare tbody tr:nth-child(odd) {
    background: color-mix(in oklab,var(--panel) 96%,#fff 4%)
}

/* Mobile stacked cards for table */
@media (max-width:720px) {
    .table-basic thead, .table.compare thead {
        display: none
    }

    .table-basic, .table.compare, .table-basic tbody, .table.compare tbody, .table-basic tr, .table.compare tr, .table-basic td, .table.compare td {
        display: block;
        width: 100%
    }

        .table-basic tr, .table.compare tr {
            margin: 0 0 .9rem;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow-sm);
            background: var(--panel)
        }

        .table-basic td, .table.compare td {
            border: 0;
            border-top: 1px dashed color-mix(in oklab,var(--border) 80%, transparent);
            padding: .8rem 1rem
        }

            .table-basic td:first-child, .table.compare td:first-child {
                padding: .95rem 1rem;
                font-weight: 900;
                color: var(--text)
            }
}

/* ---------- Footer CTA ---------- */
.cta-row {
    display: flex;
    gap: .9rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center
}

.btn-sm {
    padding: .65rem .85rem;
    border-radius: .65rem
}
/* =========================================================
   CausaNova – Tenant CSS (Navbar + Landing + Generic Page)
   v2025-08-30d  — stable snap sections + pretty comparison table
   Notes:
   - This file avoids JS-only effects. Everything is visible by default.
   - Optional scroll-driven animations run when supported, without hiding content.
========================================================= */

/* ---------- Design Tokens ---------- */
:root {
    --font-sans: Inter,"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Open Sans","Noto Sans",system-ui,sans-serif;
    --radius: .85rem;
    --radius-lg: 1.2rem;
    --shadow-sm: 0 4px 16px rgba(8,20,70,.10);
    --shadow: 0 10px 28px rgba(8,20,70,.14);
    --bg: #f6f8fc;
    --panel: #fff;
    --panel-2: #eef3ff;
    --text: #0a214f;
    --muted: #5a6a92;
    --border: #dfe6f3;
    --brand: #0b4dd9;
    --brand-600: #0a3fb3;
    --content-max: 1240px;
    --prose-max: 960px;
}

html[data-theme='dark'] {
    --bg: #0a1024;
    --panel: #0f1630;
    --panel-2: #0b1635;
    --text: #e8eefc;
    --muted: #93a4d4;
    --border: #22305a;
    --brand: #7aa3ff;
    --brand-600: #5689ff;
}

/* ---------- Base ---------- */
* {
    box-sizing: border-box
}

html, body {
    height: 100%
}

body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

img {
    max-width: 100%;
    display: block
}

a {
    color: inherit;
    text-decoration: none
}

.container {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 clamp(16px,2.6vw,24px)
}

.section-block {
    margin: clamp(2.2rem,6vw,4rem) 0
}

.section-title {
    text-align: center;
    margin: clamp(2.6rem,6vw,4rem) auto 1rem;
    max-width: var(--prose-max)
}

.grid {
    display: grid;
    gap: clamp(14px,2.2vw,22px)
}

.grid-2 {
    grid-template-columns: repeat(auto-fit,minmax(360px,1fr))
}

.grid-3 {
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr))
}

.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: clamp(14px,1.6vw,18px)
}

.card-elevated {
    box-shadow: var(--shadow)
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .8rem 1.05rem;
    border: 1px solid transparent;
    border-radius: .75rem;
    font-weight: 800;
    letter-spacing: .2px;
    line-height: 1;
    transition: transform .15s ease,background .15s ease
}

.btn-primary {
    background: #fff;
    color: #14306b
}

html[data-theme='dark'] .btn-primary {
    color: #0b214f
}

.btn-primary:hover {
    transform: translateY(-1px);
    background: #f6f8ff
}

.btn-ghost {
    background: rgba(255,255,255,.14);
    color: #fff;
    border-color: rgba(255,255,255,.4)
}

    .btn-ghost:hover {
        background: rgba(255,255,255,.22)
    }

.btn-lg {
    padding: 1rem 1.25rem;
    border-radius: .9rem
}

/* ---------- Hero ---------- */
.hero.hero--pro {
    color: #fff;
    isolation: isolate;
    overflow: hidden;
    background: radial-gradient(1200px 600px at 10% -10%,rgba(255,213,85,.28),transparent 60%),radial-gradient(800px 500px at 130% 15%,rgba(11,77,217,.45),transparent 65%),linear-gradient(160deg,#06194a 0%,#0a2f8c 60%,#0b4dd9 115%)
}

html[data-theme='dark'] .hero.hero--pro {
    background: radial-gradient(1200px 600px at 10% -10%,rgba(255,213,85,.20),transparent 60%),radial-gradient(800px 500px at 130% 15%,rgba(122,163,255,.28),transparent 65%),linear-gradient(160deg,#0a1027 0%,#0b1d57 60%,#103a9b 115%)
}

.hero .hero-inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: clamp(64px,8vw,92px) clamp(16px,2.6vw,24px);
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(420px,560px);
    gap: clamp(18px,3vw,28px);
    align-items: center
}

@media(max-width:1100px) {
    .hero .hero-inner {
        grid-template-columns: 1fr
    }
}

.hero .badge {
    display: inline-block;
    padding: .42rem .66rem;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: .25px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.32)
}

.hero .hero-title {
    margin: .4rem 0 .3rem;
    font-weight: 900;
    font-size: clamp(28px,3.2vw,44px);
    text-wrap: balance
}

.hero .hero-subtitle {
    opacity: .96;
    margin: 0 0 1.1rem;
    max-width: 62ch
}

.kpi-row {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: clamp(10px,1.4vw,16px);
    margin-top: 1rem
}

.kpi {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: .8rem;
    padding: .8rem .9rem;
    min-width: 180px
}

    .kpi .k {
        font-weight: 900;
        font-size: 1.2rem
    }

.hero-illustration {
    width: min(560px,100%);
    aspect-ratio: 16/11;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.25);
    box-shadow: var(--shadow);
    background: radial-gradient(80% 80% at 50% 35%,rgba(255,255,255,.12),transparent 60%)
}

/* ---------- Steps ---------- */
.steps {
    counter-reset: st;
    list-style: none;
    max-width: 880px;
    margin: 0 auto;
    padding: 0
}

    .steps .step {
        position: relative;
        padding: .85rem .5rem .85rem 2.6rem;
        border-left: 2px solid var(--border)
    }

        .steps .step::before {
            counter-increment: st;
            content: counter(st);
            position: absolute;
            left: -.95rem;
            top: .72rem;
            width: 1.55rem;
            height: 1.55rem;
            border-radius: 999px;
            background: var(--brand);
            color: #fff;
            display: grid;
            place-items: center;
            font-weight: 900;
            font-size: .85rem;
            box-shadow: 0 6px 16px rgba(11,77,217,.25)
        }

/* ---------- Pricing ---------- */
.pricing .price {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    border: 1px solid var(--border);
    background: var(--panel)
}

.price .price-tag {
    font-size: 2.1rem;
    font-weight: 900;
    margin: .1rem 0 .5rem;
    color: var(--brand)
}

.price.price--featured {
    box-shadow: var(--shadow);
    background: linear-gradient(180deg,#ffffff 0%,#f5f8ff 100%);
    transform: translateY(-2px)
}

html[data-theme='dark'] .price.price--featured {
    background: linear-gradient(180deg,#102456 0%,#0d1a43 100%)
}

/* ---------- FAQ ---------- */
.faq .qa {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    padding: .7rem .9rem
}

    .faq .qa + .qa {
        margin-top: .8rem
    }

.faq summary {
    cursor: pointer;
    font-weight: 800;
    list-style: none
}

    .faq summary::-webkit-details-marker {
        display: none
    }

/* ---------- Trust ---------- */
.trust {
    background: var(--panel);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border)
}

.trust-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(12px,2vw,20px);
    padding: 1.1rem 0
}

.logo-row {
    display: flex;
    gap: clamp(18px,2.4vw,28px);
    flex-wrap: wrap
}

    .logo-row .logo {
        height: 28px;
        opacity: .75;
        filter: grayscale(1);
        transition: .18s
    }

        .logo-row .logo:hover {
            opacity: 1;
            filter: none
        }

/* ---------- Slice / snap layout ---------- */
.snap-container {
    scroll-snap-type: y proximity
}

.snap-section {
    scroll-snap-align: start;
    scroll-margin-top: 72px; /* sticky nav room */
}
/* Sections are always visible (no hidden default). */
@supports (animation-timeline: auto) {
    @keyframes fade-slide-in {
        from {
            opacity: 0;
            transform: translateY(22px)
        }

        to {
            opacity: 1;
            transform: none
        }
    }

    .snap-section > .container,
    .snap-section .grid,
    .snap-section .steps,
    .snap-section .pricing,
    .snap-section .faq {
        view-timeline-name: --reveal;
        view-timeline-axis: block;
        animation-timeline: --reveal;
        animation-name: fade-slide-in;
        animation-duration: 1ms; /* timeline-controlled */
        animation-range: entry 15% cover 35%;
        animation-fill-mode: both;
    }
}

/* ---------- Comparison table ---------- */
.table-wrap {
    max-width: var(--prose-max);
    margin: 0 auto;
    overflow: auto
}

.compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 1rem;
    box-shadow: var(--shadow);
    overflow: hidden
}

    .compare-table thead th {
        background: linear-gradient(180deg,var(--panel-2),transparent);
        font-weight: 900;
        text-align: left;
        padding: .9rem 1rem;
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 0
    }

    .compare-table th, .compare-table td {
        padding: .85rem 1rem;
        text-align: left;
        vertical-align: top;
        border-top: 1px solid var(--border)
    }

    .compare-table tr:first-child th, .compare-table tr:first-child td {
        border-top: 0
    }

    .compare-table td + td, .compare-table th + th {
        border-left: 1px solid var(--border)
    }

    .compare-table tbody tr:nth-child(odd) {
        background: color-mix(in oklab,var(--panel) 92%,#000 8%)
    }

html[data-theme='dark'] .compare-table tbody tr:nth-child(odd) {
    background: color-mix(in oklab,var(--panel) 96%,#fff 4%)
}

/* Mobile stacked cards */
@media(max-width:720px) {
    .compare-table thead {
        display: none
    }

    .compare-table, .compare-table tbody, .compare-table tr, .compare-table td {
        display: block;
        width: 100%
    }

        .compare-table tr {
            margin: 0 0 .9rem;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow-sm);
            background: var(--panel)
        }

        .compare-table td {
            border: 0;
            border-top: 1px dashed color-mix(in oklab,var(--border) 80%,transparent);
            padding: .85rem 1rem
        }

            .compare-table td:first-child {
                padding: .95rem 1rem;
                font-weight: 900;
                color: var(--text)
            }
}
/* --- Sticky Footer: Footer hängt unten, auch bei kurzen Seiten --- */
html, body {
    height: 100%;
}

body {
    min-height: 100dvh; /* volle Höhe */
    display: flex;
    flex-direction: column; /* vertikale Achse */
}

/* Dein Inhaltsbereich (Main/Page) nimmt den freien Platz ein */
main, .page, .container.page, #nami-root, .nami-page {
    flex: 1 0 auto;
}

/* Footer wandert ans Ende der Spalte */
.site-footer {
    margin-top: auto; /* schiebt den Footer nach unten */
}

    /* Optionale Politur, um “weiße Balken” durch Außenabstände zu vermeiden */
    .site-footer.section-block {
        margin-top: auto !important;
    }

.section-block:last-child {
    margin-bottom: 0;
}