:root {
    --ac: #00ae42; --ac-hover: #00c24a; --acs: rgba(0, 174, 66, .12);
    --bg: #ffffff; --bg2: #f5f5f5; --card: #ffffff; --fg: #1f1f1f; --mu: #6e6e73; --ln: #e6e6e8;
    --shadow: 0 1px 2px rgba(0,0,0,.05); --shadow-lg: 0 12px 40px rgba(0,0,0,.10);
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #141414; --bg2: #191919; --card: #1f1f1f; --fg: #f2f2f2; --mu: #9a9a9a; --ln: #2f2f2f;
      --shadow: none; --shadow-lg: 0 12px 40px rgba(0,0,0,.5); --acs: rgba(0,174,66,.18);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #141414; --bg2: #191919; --card: #1f1f1f; --fg: #f2f2f2; --mu: #9a9a9a; --ln: #2f2f2f;
    --shadow: none; --shadow-lg: 0 12px 40px rgba(0,0,0,.5); --acs: rgba(0,174,66,.18);
    color-scheme: dark;
  }
  * { box-sizing: border-box }
  html { scroll-behavior: smooth }
  body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif }
  a { color: inherit }
  img { max-width: 100%; display: block }
  section { padding: 72px 20px }
  .wrap { max-width: 1080px; margin: 0 auto }
  h1, h2, h3 { line-height: 1.2; margin: 0 0 12px }
  h2 { font-size: clamp(24px, 3.4vw, 34px) }
  .mu { color: var(--mu) }
  .ac { color: var(--ac) }

  /* ---------- Kopfzeile ---------- */
  header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ln) }
  header .row { max-width: 1080px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 20px }
  .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; text-decoration: none }
  .brand img { width: 28px; height: 28px; border-radius: 8px }
  .brand span { color: var(--ac) }
  nav.links { display: flex; gap: 22px; margin-left: auto; font-size: 14px; font-weight: 600 }
  nav.links a { text-decoration: none; color: var(--mu) }
  nav.links a:hover { color: var(--fg) }
  @media (max-width: 680px) { nav.links { display: none } }

  /* ---------- Buttons ---------- */
  .btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--ln); background: var(--card); color: var(--fg); padding: 11px 20px; border-radius: 999px; font: inherit; font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; box-shadow: var(--shadow) }
  .btn:hover { border-color: var(--ac) }
  .btn.pri { background: var(--ac); border-color: var(--ac); color: #fff }
  .btn.pri:hover { background: var(--ac-hover) }
  .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px }
  .store-badge { display: inline-flex; align-items: center }
  .store-badge img { height: 48px; width: auto; display: block }

  /* ---------- Hero ---------- */
  .hero { padding-top: 64px; text-align: center }
  .hero .pill { display: inline-block; padding: 5px 14px; border-radius: 999px; background: var(--acs); color: var(--ac); font-size: 13px; font-weight: 700; margin-bottom: 18px }
  .hero h1 { font-size: clamp(32px, 6vw, 56px); font-weight: 800; letter-spacing: -0.02em; max-width: 900px; margin: 0 auto 18px }
  .hero p.lead { max-width: 640px; margin: 0 auto; font-size: 19px; color: var(--mu) }
  .hero .cta-row { justify-content: center }
  .hero-shot { margin: 52px auto 0; max-width: 960px; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--ln) }
  .disclaimer { margin-top: 14px; font-size: 12px; color: var(--mu) }

  /* ---------- Feature-Grid ---------- */
  .features, .alt { background: var(--bg2) }
  .features.plain { background: var(--bg) }
  /* ---------- Feature-Karussell (langsam, automatisch, endlos) ---------- */
  .carousel { margin-top: 40px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent) }
  .carousel-track { display: flex; gap: 18px; width: max-content; animation: carousel-scroll 150s linear infinite }
  .carousel:hover .carousel-track { animation-play-state: paused }
  @keyframes carousel-scroll { from { transform: translateX(0) } to { transform: translateX(-50%) } }
  @media (prefers-reduced-motion: reduce) { .carousel-track { animation: none } }
  .carousel .feat { flex: 0 0 260px }

  .feat { background: var(--card); border: 1px solid var(--ln); border-radius: 16px; padding: 22px; box-shadow: var(--shadow) }
  .feat i { font-style: normal; font-size: 20px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; border-radius: 10px; background: var(--acs); color: var(--ac) }
  .feat h3 { font-size: 16px; margin-bottom: 6px }
  .feat p { margin: 0; color: var(--mu); font-size: 14px }

  /* ---------- Screenshots ---------- */
  .shots-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 40px }
  figure { margin: 0; background: var(--card); border: 1px solid var(--ln); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow) }
  figure img { aspect-ratio: 16/10; object-fit: cover; object-position: top }
  figcaption { padding: 12px 14px; font-size: 13px; font-weight: 700 }

  /* ---------- Community-Zähler ---------- */
  .community { text-align: center }
  .counters { display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; margin-top: 36px }
  .counter b { display: block; font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums }
  .counter span { color: var(--mu); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700 }
  .counter.na { display: none }

  /* ---------- Privacy ---------- */
  .privacy .box { background: var(--card); border: 1px solid var(--ln); border-radius: 18px; padding: 36px; margin-top: 32px; display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start }
  .privacy .box i { font-size: 30px }
  @media (max-width: 560px) { .privacy .box { grid-template-columns: 1fr } }

  /* ---------- Footer ---------- */
  footer { border-top: 1px solid var(--ln); padding: 40px 20px }
  footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--mu) }
  footer nav { display: flex; gap: 18px; flex-wrap: wrap }
  footer a { text-decoration: none } footer a:hover { color: var(--ac) }

  /* ---------- Cookie-/Analytics-Banner ---------- */
  /* Die Seite setzt technisch keine Cookies und speichert bis zu einer Entscheidung hier gar nichts
     im Browser - das anonyme Pageview-/Klick-Beacon (siehe <script> unten, trackEvent()) sendet erst
     nach "Akzeptieren". "Ablehnen" merkt sich per localStorage nur die Ablehnung selbst (sonst
     muesste bei jedem Besuch neu gefragt werden), damit ist die Analyse eine echte Wahl statt einer
     Standardannahme (siehe externer Datenschutz-Check: "cookie-los" allein beweist keine
     Einwilligungsfreiheit der Datenverarbeitung). */
  #cookieBanner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--card); border-top: 1px solid var(--ln); box-shadow: 0 -4px 24px rgba(0,0,0,.12); padding: 18px 20px; display: none; }
  #cookieBanner.show { display: block; }
  #cookieBanner .wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: space-between; padding: 0; }
  #cookieBanner p { margin: 0; font-size: 13px; color: var(--mu); max-width: 640px; }
  #cookieBanner .cb-btns { display: flex; gap: 10px; flex-shrink: 0; }
  #cookieBanner .btn { padding: 9px 18px; font-size: 13px; }
  @media (max-width: 560px) { #cookieBanner .wrap { flex-direction: column; align-items: stretch; } #cookieBanner .cb-btns { justify-content: flex-end; } }

  /* ---------- Kleine Layout-Helfer (ersetzen vormalige inline style="..."-Attribute, die von der
     neuen CSP ohne 'unsafe-inline' stillschweigend ignoriert worden waeren - siehe Server-Caddyfile) */
  .mt0 { margin-top: 0 }
  .mb0 { margin-bottom: 0 }
  .tc { text-align: center }
  .pt0 { padding-top: 72px }
  .cta-center { justify-content: center }
  /* Honeypot-Feld: fuer Menschen unsichtbar, Bots fuellen es trotzdem aus (siehe server/src/routes/
     landing.js). War zuvor inline positioniert - unter der neuen CSP (style-src 'self', kein
     'unsafe-inline') wuerde das Attribut ignoriert und das Feld sichtbar, was den Spam-Schutz UND
     die Formular-UX fuer echte Besucher gebrochen haette. */
  .hp { position: absolute; left: -9999px }

  /* ---------- Kontakt ---------- */
  .contact-form { max-width: 520px; margin: 32px auto 0; display: grid; gap: 14px }
  .contact-form label { font-size: 13px; font-weight: 700; display: block; margin-bottom: 6px }
  .contact-form input, .contact-form textarea { width: 100%; font: inherit; font-size: 15px; padding: 11px 14px; border: 1px solid var(--ln); border-radius: 10px; background: var(--card); color: var(--fg) }
  .contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--acs); border-color: var(--ac) }
  .contact-form textarea { resize: vertical; min-height: 120px }
  .contact-form button { justify-self: start }
  .contact-form button:disabled { opacity: .6; cursor: default }
  .contact-msg { font-size: 14px; margin-top: 4px; display: none }
  .contact-msg.ok { display: block; color: var(--ac) }
  .contact-msg.err { display: block; color: #e5484d }
  .rnd { display: block; margin-top: 24px; background: var(--card); border: 1px solid var(--ln); border-radius: 16px; padding: 18px; box-shadow: var(--shadow) }
  .rnd img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 12px; background: var(--ln); display: block }
  .rnd-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 20px; align-items: center; margin-top: 12px }
  .rnd-imgwrap { position: relative; width: 100%; aspect-ratio: 4 / 3; background: var(--ln); border-radius: 12px }
  .rnd-imgwrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 12px }
  #rndBy a { color: var(--ac); font-weight: 600; text-decoration: none }
  #rndBy a:hover { text-decoration: underline }
  .rnd-top #rndTrend { min-width: 0 }
  .rnd h3 { margin: 0 0 8px; font-size: 20px }
  .rnd-body .cta-row { margin-top: 16px }
  @media (max-width: 600px) { .rnd-top { grid-template-columns: 1fr } }
  .rnd-body h4 { font-size: 13px; color: var(--mu); margin: 14px 0 2px; font-weight: 600 }
  .mtable { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 10px 0 4px; font-size: 14px }
  .mtable th, .mtable td { padding: 5px 4px; border-bottom: 1px solid var(--ln); text-align: left }
  .mtable th { color: var(--mu); font-weight: 500; font-size: 12px }
  .mtable th:first-child, .mtable td:first-child { width: 40% }
  .mtable th.num, .mtable td.num { width: 20%; text-align: right; font-variant-numeric: tabular-nums }
  .trend-svg { display: block; width: 100%; height: 70px }
  .trend-svg .area { fill: var(--ac); opacity: .12 }
  .trend-svg .line { fill: none; stroke: var(--ac); stroke-width: 2; vector-effect: non-scaling-stroke }
  .rnd-body { transition: opacity 1.2s ease }
  .rnd-body.fade { opacity: 0 }
  .trend-svg { height: 90px }
  .trend-svg .line { stroke-linejoin: round; stroke-linecap: round }
  @media (max-width: 600px) { .rnd-top { grid-template-columns: 1fr } }
  .rnd .cta-row { justify-content: center }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px }
  .chip { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--bg2); color: var(--fg); font-size: 13px; line-height: 1.3 }

  /* ---------- Funktionsvergleich ---------- */
  .compare .wrap { max-width: 1000px }
  .cmp-lead { max-width: 680px; margin: 0 0 28px; font-size: 17px }
  .cmp-scroll { overflow-x: auto; background: var(--card); border: 1px solid var(--ln); border-radius: 18px; box-shadow: var(--shadow) }
  .cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 760px; font-size: 14px }
  .cmp-table th, .cmp-table td { padding: 13px 14px; text-align: center; border-bottom: 1px solid var(--ln); vertical-align: middle }
  .cmp-table thead th { font-size: 13px; font-weight: 700; color: var(--mu); background: var(--card); position: sticky; top: 0 }
  .cmp-table thead th a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--mu) }
  .cmp-table thead th a:hover { color: var(--ac); border-bottom-color: var(--ac) }
  .cmp-table th:first-child, .cmp-table td:first-child { text-align: left }
  .cmp-table tbody th { font-weight: 600; color: var(--fg); background: var(--card); position: sticky; left: 0; min-width: 230px }
  .cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: 0 }
  .cmp-table .us { background: var(--acs) }
  .cmp-table thead th.us { color: var(--ac); font-size: 15px; font-weight: 800; box-shadow: inset 0 3px 0 var(--ac) }
  .cmp-table .y { color: var(--ac); font-size: 18px; font-weight: 800 }
  .cmp-table .p { color: #d98a00; font-size: 17px }
  .cmp-table .n { color: var(--mu); opacity: .6 }
  .cmp-table .w { font-size: 12px; margin-left: 3px; vertical-align: middle } .cmp-legend .w { font-size: 12px; margin-right: 2px }
  .cmp-legend { margin: 14px 4px 0; font-size: 13px; color: var(--mu) }
  .cmp-legend .y { color: var(--ac); font-weight: 800 } .cmp-legend .p { color: #d98a00 }
  .compare .disclaimer { max-width: 820px }
  .compare .disclaimer a { color: inherit }
  @media (max-width: 680px) { .cmp-table { font-size: 13px } .cmp-table tbody th { min-width: 170px } .cmp-table th, .cmp-table td { padding: 11px 10px } }

  /* Sprachumschalter in der Kopfzeile */
  .langsw { display: inline-flex; gap: 2px; border: 1px solid var(--ln); border-radius: 16px; padding: 2px; margin-left: 4px }
  header .row > .langsw:not(:last-child) { margin-left: auto }
  nav.links + .langsw { margin-left: 0 }
  .langsw button { border: 0; background: none; color: var(--mu); font: inherit; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 12px; cursor: pointer }
  .langsw button.on { background: var(--ac); color: #fff }

  /* Premium-Bereich */
  .premium { padding: 64px 20px; background: var(--bg2) }
  .premium .pill { vertical-align: middle; margin-left: 8px }
  .prem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 22px 0 }
  .prem-grid > div { background: var(--card); border: 1px solid var(--ln); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow) }
  .prem-grid h3 { margin: 0 0 6px; font-size: 16px }
  .prem-grid p { margin: 0; color: var(--mu); font-size: 14px; line-height: 1.5 }
  .premium .pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--acs); color: var(--ac) }
  .carousel.rev .carousel-track { animation-direction: reverse }
  .premium .carousel { margin: 22px 0 }
  .premium .carousel-track { animation-duration: 60s }
  .carousel .feat { min-height: 264px }
  .cmp-table tbody tr.cat th { position: static; background: var(--bg2); color: var(--ac); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-align: left; padding: 9px 14px }

.faq details { border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 12px 16px; margin: 10px 0; background: rgba(255,255,255,.02) }
.faq summary { cursor: pointer; font-weight: 600 }
.faq details p { margin: 8px 0 0; opacity: .75 }

.seo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; margin-top: 24px }
.langlinks { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; margin-top: 18px; font-size: 13px }
.langlinks a { text-decoration: none; opacity: .75 }
.langlinks a.on { opacity: 1; font-weight: 700 }