/* scan-pack block 1 */
/* ─── Reset & Tokens ─────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --green:      #006b3e;
      --green-dark: #006b3e;
      --green-bg:   #ecf7f1; --icon-ink: #1a1a2e; --icon-accent: #00a55d; --icon-gap: #fff;
      --text:       #1a1a2e;
      --muted:      #374151;
      --bg:         #fff;
      --bg-alt:     #f5f7fa;
      --bg-top:     #f1f3f5;
      --border:     #e5e7eb;
      --radius:     10px;
      --shadow:     0 1px 3px rgba(0,0,0,.06);
      --shadow-md:  0 4px 14px rgba(0,0,0,.08);
      --font:       -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
      --max:        1120px;
    }
    html { font-size: 16px; scroll-behavior: smooth; }
    body { font-family: var(--font); color: var(--text); background: var(--bg-alt); line-height: 1.65; }
    a { color: inherit; text-decoration: none; }
    ul { list-style: none; }
    button { cursor: pointer; font: inherit; border: none; background: none; }
    img { max-width: 100%; height: auto; display: block; }

    /* ─── Layout ─────────────────────────────────────── */
    .wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; }
    section { padding: 68px 0; }
    .bg-white { background: var(--bg-alt); }
    .bg-alt   { background: var(--bg-alt); }

    /* ─── Typography ─────────────────────────────────── */
    h1 { font-size: clamp(1.85rem, 4.5vw, 2.9rem); line-height: 1.12; font-weight: 700; letter-spacing: -.025em; }
    h2 { font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
    h3 { font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
    p  { color: var(--muted); font-size: .9625rem; }
    .label { font-size: 1.5rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: linear-gradient(to right, #00c06a, #005430); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .section-head { text-align: center; max-width: 620px; margin: 0 auto 2.75rem; }
    .section-head p { margin-top: .6rem; }

    /* ─── Buttons ─────────────────────────────────────── */
    .btn {
      display: inline-flex; align-items: center; gap: .4rem;
      padding: .65rem 1.4rem; border-radius: 8px;
      font-size: .9rem; font-weight: 600; transition: all .15s;
    }
    .btn-primary  { background: linear-gradient(to right, #00c06a, #005430); color: #fff; }
    .btn-primary:hover { background: linear-gradient(to right, #009a58, #003d24); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,135,78,.25); }
    .btn-outline  { background: linear-gradient(#fff,#fff) padding-box, linear-gradient(to right, #00c06a, #005430) border-box; color: var(--green); border: 2px solid transparent; }
    .btn-outline:hover { background: linear-gradient(var(--green-bg),var(--green-bg)) padding-box, linear-gradient(to right, #00c06a, #005430) border-box; }
    .btn-sm { padding: .45rem 1rem; font-size:14px; }
    .btn-secondary { background:#fff; color:#000; border:2px solid #000; padding-top:calc(.45rem - 2px); padding-bottom:calc(.45rem - 2px); }
    .btn-secondary:hover { background:#000; color:#fff; border-color:#000; }
    .btn-white { background: #fff; color: var(--green); font-weight: 700; }
    .btn-white:hover { background: #f0fdf4; }
    .btn-ghost-w { background: #fff; color: var(--green); border: 1.5px solid #fff; }
    .btn-ghost-w:hover { background: rgba(255,255,255,.22); }

    /* ─── Topbar ──────────────────────────────────────── */
    .topbar { background: linear-gradient(to right, #00c06a, #005430); border-bottom: 1px solid rgba(0,0,0,.18); font-size:14px; }
    .topbar-inner {
      max-width: var(--max); margin: 0 auto; padding: 0 1.5rem;
      display: flex; align-items: center; justify-content: space-between;
      height: 34px; gap: 1rem;
    }
    .topbar-left { display: flex; align-items: center; gap: 1.25rem; color: rgba(255,255,255,.92); }
    .topbar-left a { color: rgba(255,255,255,.92); transition: color .15s; }
    .topbar-left a:hover { color: #fff; }
    .topbar-right { display: flex; align-items: center; gap: .85rem; }
    .topbar-right a { color: rgba(255,255,255,.92); font-weight: 500; transition: color .15s; white-space: nowrap; }
    .topbar-right a:hover { color: #fff; }
    .topbar-sep { color: rgba(255,255,255,.45); }

    /* ─── Main Nav ────────────────────────────────────── */
    nav.mainnav {
      position: sticky; top: 0; z-index: 100;
      background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border);
      box-shadow: 0 1px 4px rgba(0,0,0,.05);
    }
    .nav-inner {
      max-width: var(--max); margin: 0 auto; padding: 0 1.5rem;
      display: flex; align-items: center; gap: 1.5rem; height: 60px;
    }
    .nav-logo img { height: 32px; width: auto; }
    .nav-links { display: flex; align-items: center; gap: .1rem; flex: 1; }
    .nav-links a {
      padding: .38rem .62rem; border-radius: 6px;
      font-size:14px; font-weight: 500; color: var(--muted);
      white-space: nowrap; transition: color .15s, background .15s;
    }
    .nav-links a:hover, .nav-links a.active { color: var(--green-dark); background: var(--green-bg); }
    .nav-cta { margin-left: auto; flex-shrink: 0; display: flex; gap: .5rem; align-items: center; }
    .nav-burger { display: none; flex-direction: column; gap: 5px; padding: 6px; margin-left: auto; }
    .nav-burger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; }
    .nav-mobile { max-height: 0; overflow: hidden; visibility: hidden; background: var(--bg); border-top: 1px solid var(--border); flex-direction: column; display: flex; }
    .nav-mobile.open { max-height: calc(100vh - 60px); min-height: calc(100vh - 60px); overflow-y: auto; visibility: visible; background: #fff; }
    .nav-mobile a { padding: .7rem 1.5rem; font-size: .95rem; color: var(--text); border-bottom: 1px solid var(--border); font-weight: 500; }
    .nav-mobile .btn { margin: 1rem 1.5rem; justify-content: center; }

    /* ─── Hero ───────────────────────────────────────── */
    .hero { background: var(--bg-alt); border-bottom: 1px solid var(--border); padding: 60px 0 64px; }
    .hero-inner {
   max-width: var(--max); margin: 0 auto; padding: 0 1.5rem;
   display: flex; flex-wrap: wrap; gap: 3.5rem; align-items: center;
  }
/* scan-pack block 2 */
.hero-inner > * { flex: 1 1 340px; min-width: 0; }
.hero-inner > .hero-result-img { flex: 1 1 300px; max-width: 380px; }
    .hero-label {
      display: inline-flex; flex-wrap: wrap; align-items: center; gap: .45rem;
      background: var(--green-bg); color: var(--green-dark);
      padding: .28rem .8rem; border-radius: 100px;
      font-size:14px; font-weight: 600; margin-bottom: 1.1rem;
    }
    .hero h1 { margin-bottom: .9rem; }
    .hero-sub { font-size: 1.05rem; color: var(--muted); margin-bottom: 1.75rem; max-width: 500px; }
    .hero-ctas { display: flex; gap: .65rem; flex-wrap: wrap; margin-bottom: 2rem; }
    /* Seit dem 23.09.2026: unter 701px steht jeder Haupt-CTA allein auf voller
       Spaltenbreite, untereinander statt nebeneinander. Gemessen am 23.09.2026
       war der Knopf hier bei 390px Fensterbreite nur rund die halbe Spalte
       breit (Median 189 von 342 Pixeln). Gleicher Haltepunkt und gleiche
       Regel wie im Hero der Startseite (Commit 7cdde0a622) und auf den
       fuenf Seiten aus Commit 1250475cb8. */
    @media (max-width: 700px) {
      .hero-ctas { display: grid; grid-template-columns: 1fr; gap: .55rem; }
      .hero-ctas .btn { width: 100%; justify-content: center; }
    }
        .hero-social-proof {
      display: inline-flex; align-items: center; gap: .6rem;
      background: #fff; border: 1px solid var(--border);
      border-radius: 999px; padding: .35rem .85rem .35rem .45rem;
      margin-bottom: 1.5rem; font-size: .8rem; color: var(--text);
    }
    .hsp-avatars { display: flex; }
    .hsp-av {
      width: 26px; height: 26px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: .62rem; font-weight: 700; color: #fff;
      border: 2px solid #fff; margin-left: -6px; flex-shrink: 0;
    }
    .hsp-avatars .hsp-av:first-child { margin-left: 0; }
    .hero-checks { display: flex; flex-direction: column; gap: .45rem; }
    .hero-check { display: flex; align-items: center; gap: .5rem; font-size:14px; color: var(--muted); font-weight: 500; }
    .hero-check svg { color: var(--green); flex-shrink: 0; }

    /* Hero card */
    .hero-card {
      background: var(--bg); border: 1px solid var(--border);
      border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-md);
    }
    .hero-card-head { padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--border); background: var(--bg-alt); }
    .hero-card-title { font-size:14px; font-weight: 700; color: var(--text); }
    .hero-card-sub { font-size:14px; color: var(--muted); margin-top: .1rem; }
    .hrow {
      display: flex; align-items: center; gap: .85rem;
      padding: .85rem 1.4rem; border-bottom: 1px solid var(--border); transition: background .15s;
    }
    .hrow:hover { background: var(--bg-alt); }
    .hrow-icon { flex-shrink: 0; color: var(--green); display: flex; align-items: center; justify-content: center; }
    .hrow-icon svg { width: 28px; height: 28px; }
    .hrow-info { flex: 1; min-width: 0; }
    .hrow-info strong { display: block; font-size:14px; font-weight: 400; }
    .hrow-info span { display: block; font-size:14px; color: var(--muted); }
    .hrow-price {
      font-size:14px; font-weight: 700; color: var(--green);
      background: var(--green-bg); padding: .18rem .5rem; border-radius: 5px; white-space: nowrap;
    }
    .hrow-price-highlight {
      font-size:14px; font-weight: 700; color: #fff;
      background: var(--green); padding: .18rem .5rem; border-radius: 5px; white-space: nowrap;
    }
    .hero-card-foot {
      padding: .85rem 1.4rem; background: var(--green-bg);
      display: flex; align-items: center; justify-content: space-between;
    }
    .hero-card-foot span { font-size:14px; color: var(--muted); }
    .hero-card-foot a { font-size:14px; font-weight: 600; color: var(--green); display: flex; align-items: center; gap: .2rem; }

    /* ─── USP Strip ──────────────────────────────────── */
    .usp-strip { background: var(--bg); border-bottom: 1px solid var(--border); }
    .usp-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-left: 1px solid var(--border); }
    .usp-item { display: flex; align-items: center; gap: .7rem; padding: 1.1rem 1.3rem; border-right: 1px solid var(--border); font-weight: 400; }
    .usp-ico { flex-shrink: 0; color: var(--green); display: flex; align-items: center; justify-content: center; }
    .usp-ico svg { width: 28px; height: 28px; }
    .usp-item strong { display: block; font-size:14px; font-weight: 400; }
    .usp-item span   { display: block; font-size:14px; color: var(--muted); }

    /* ─── Feature Cards ──────────────────────────────── */
    .lk-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
    .lk-card {
      background: var(--bg); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 1.5rem 1.25rem;
      display: flex; flex-direction: column; align-items: flex-start; gap: .6rem;
    }
    .lk-card svg { flex-shrink: 0; }
    .lk-card strong { font-size: .92rem; font-weight: 700; color: var(--text); }
    .lk-card p { font-size:14px; color: var(--muted); line-height: 1.55; margin: 0; }

    /* ─── Prose + Aside ──────────────────────────────── */
    .prose-grid { display: grid; grid-template-columns: 1fr 300px; gap: 3rem; align-items: start; }
    .prose-body p { margin-bottom: 1rem; line-height: 1.75; }
    .prose-body p strong, .prose-body p b { font-weight: normal; }
    .prose-body h2 { margin-bottom: .75rem; }
    .prose-body h3 { margin: 1.5rem 0 .5rem; font-size: 1.05rem; font-weight: 700; }
    .prose-body ul { margin: .5rem 0 1rem 0; display: flex; flex-direction: column; gap: .35rem; }
    .prose-body li { display: flex; align-items: flex-start; gap: .45rem; font-size: .9rem; color: var(--muted); }
    .prose-body li::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; margin-top: .5rem; }
    .prose-aside {
      background: var(--bg); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 1.5rem; position: sticky; top: 80px;
    }
    .prose-aside h3 { margin-bottom: 1rem; font-size:14px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
    .prose-aside ul { display: flex; flex-direction: column; gap: .6rem; }
    .prose-aside li { font-size:14px; color: var(--muted); display: flex; align-items: flex-start; gap: .5rem; }
    .prose-aside li::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; margin-top: .52rem; }
    .prose-aside .btn { width: 100%; justify-content: center; margin-top: 1.25rem; }

    /* ─── FAQ ────────────────────────────────────────── */
    .faq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; align-items: start; }
    .faq-col { display: flex; flex-direction: column; gap: .6rem; }
    .faq-col h4 { font-size: .95rem; font-weight: 700; color: var(--text); margin: .8rem 0 .25rem; padding: .6rem 0 .3rem; border-top: 1px solid var(--border); }
    .faq-col h4:first-child { border-top: none; margin-top: 0; }
    .faq-col > p { font-size: .93rem; color: var(--muted); margin: 0 0 .2rem; line-height: 1.55; }
    details.faq-item { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
    details.faq-item summary {
      padding: 1rem 1.25rem; font-weight: 600; font-size: .92rem;
      cursor: pointer; list-style: none;
      display: flex; justify-content: space-between; align-items: center; gap: .75rem;
    }
    details.faq-item summary::-webkit-details-marker { display: none; }
    details.faq-item summary::after { content: "+"; font-size: 1.25rem; font-weight: 300; color: var(--muted); flex-shrink: 0; line-height: 1; }
    details.faq-item[open] summary::after { content: "−"; }
    details.faq-item .faq-body { padding: 0 1.25rem 1.1rem; font-size: .875rem; color: var(--muted); line-height: 1.7; }
    details.faq-item .faq-body p + p { margin-top: .6rem; }
    details.faq-item .faq-body a { color: var(--green); text-decoration: underline; }
    details.faq-item .faq-body ul { margin: .5rem 0 0 0; display: flex; flex-direction: column; gap: .35rem; }
    details.faq-item .faq-body li { display: flex; align-items: flex-start; gap: .4rem; }
    details.faq-item .faq-body li::before { content: ""; display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--green); flex-shrink: 0; margin-top: .52rem; }

    /* ─── CTA Banner ─────────────────────────────────── */
    .cta-banner { background: var(--green); color: #fff; text-align: center; padding: 56px 0; }
    .cta-banner h2 { color: #fff; margin-bottom: .65rem; }
    .cta-banner > .wrap > p { color: #fff; font-size: 1rem; max-width: 480px; margin: 0 auto 1.75rem; }
    .cta-badges { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 2rem; flex-wrap: wrap; }
    .cta-badge { display: flex; align-items: center; gap: .45rem; font-size:14px; color: #fff; }
    .cta-badge svg { color: #fff; }

    /* ─── Footer ─────────────────────────────────────── */
    footer { background: #0f172a; color: rgba(255,255,255,.75); padding: 52px 0 28px; }
    .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2.75rem; }
    @media (max-width: 1240px) { footer .footer-grid { grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important; gap: 1.25rem !important; } } @media (max-width: 1100px) { footer .footer-grid { gap: 1rem !important; } } @media (max-width: 760px) { footer .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 1.6rem !important; } } @media (max-width: 520px) { footer .footer-grid { grid-template-columns: 1fr !important; } }
    .footer-logo { margin-bottom: .6rem; }
    .footer-logo img { height: 36px; width: auto; background: #fff; border-radius: 3px; padding: 5px 12px; }
    .footer-desc { font-size:14px; line-height: 1.7; max-width: 235px; color: rgba(255,255,255,.85); } .footer-h a { color: inherit; text-decoration: none; } .footer-h a:hover { color: #fff; } footer .footer-h-social { margin-top: 2.1rem !important; margin-bottom: .45rem !important; } footer .footer-social { margin-top: .15rem !important; } .footer-adh { display: inline-block; box-sizing: border-box; width: 161px; max-width: 100%; background: #fff; border-radius: 3px; padding: 5px 12px; margin: 2.2rem 0 .35rem; } .footer-adh img { display: block; width: 100%; height: auto; } .footer-adh-note { font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.55); }
    .footer-col h4 { color: rgba(255,255,255,.75); font-size:14px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 1.6rem; }
    .footer-col ul { display: flex; flex-direction: column; gap: .55rem; }
    .footer-col a { font-size:14px; transition: color .15s; }
    .footer-col a:hover { color: #fff; }
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,.08); padding-top: 1.4rem;
      display: flex; justify-content: space-between; align-items: center;
      font-size:14px; flex-wrap: wrap; gap: .65rem;
    }
    .footer-legal { display: flex; gap: 1.1rem; flex-wrap: wrap; }
    .footer-legal a:hover { color: #fff; }

    /* ─── Responsive ─────────────────────────────────── */
    /* Faellt der Hero auf eine Spalte, bekaeme das Ergebnisbild die volle
   Breite: bei 900 Pixeln Viewport 804 bis 852 Pixel und damit ein Block, der
   den Bildschirm allein fuellt. Der Deckel haelt es auf Anschauungsgroesse und
   bringt mehr vom Bericht ins Bild. Er laeuft stufenlos mit: 432 Pixel bei 600,
   504 bei 700, ab 723 der feste Wert. Unter 600 Pixeln bleibt das Bild voll
   breit, auf dem Handy ist das richtig. */
@media (min-width: 600px) and (max-width: 960px) {
  .hero-result-img { max-width: min(520px, 72vw); margin-inline: auto; }
}
@media (max-width: 960px) {
      .hero-inner { grid-template-columns: 1fr; }
      .hero-card { display: none; }
      .usp-grid { grid-template-columns: repeat(2, 1fr); }
      .lk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .faq-cols { grid-template-columns: 1fr; }
      .prose-grid { grid-template-columns: 1fr; }
      .prose-aside { position: static; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 640px) {
      .topbar { display: none; }
      .nav-links, .nav-cta { display: none; }
      .nav-burger { display: flex; }
      .hero { padding: 40px 0 48px; }
      section { padding: 48px 0; }
      .usp-grid { grid-template-columns: 1fr; border-left: none; }
      .usp-item { border: 1px solid var(--border); border-radius: var(--radius); }
      .lk-cards { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-bottom { flex-direction: column; align-items: flex-start; }
    }

    h1.hero-label { font-size: 14px !important; font-weight: 700 !important; line-height: 1.5 !important; }
/* scan-pack block 3 */
/* Themen-Navigation im linken Seitenrand. Der Inhalt bleibt exakt so breit
   und so mittig wie auf einer Seite ohne Navigation: nichts rutscht nach
   rechts, nichts wird schmaler. Unter 1720px passt die Box nicht mehr in den
   Rand und wird ausgeblendet, ab 770px abwaerts bleibt das aufklappbare Navi
   ueber dem Inhalt. Die Klasse steht dreimal im Selektor, damit die Regeln
   die site-shell-Regel mit :not(:has(...)) schlagen, die auf drei Klassen
   kommt. */
@media (min-width: 1720px) {
  body main.has-topicnav.has-topicnav.has-topicnav {
    max-width: none; padding: 0;
    /* ohne Abstand zwischen den Spuren und Zeilen, damit der Inhalt
       genauso dicht unter dem Hero sitzt wie ohne Navigation */
    gap: 0;
    /* Spur 1 ist der linke Seitenrand minus 1,5rem Abstand zum Inhalt */
    grid-template-columns: calc(50% - 584px) minmax(0, 1fr);
  }
  /* holt die Inhaltsspalte ueber Spur 1 zurueck auf die volle Breite,
     Spur 1 entspricht dabei der Breite von Spur 2 minus 1168px */
  body main.has-topicnav.has-topicnav.has-topicnav > .content-col { margin-left: calc(1168px - 100%); }
  body main.has-topicnav.has-topicnav.has-topicnav .topicnav {
    grid-column: 1; justify-self: end; width: 226px; margin-right: 10px; z-index: 5;
  }
  /* Das Vorteilsband ist randlos weiss. Neben dem Navi-Kasten und rechts vom
     Raster soll dort das Seitengrau stehen, sonst geht der weisse Kasten im
     Band unter. Das Weiss sitzt jetzt genau auf dem Vierer-Raster, die
     Trennlinie wandert mit (Bandhoehe bleibt dadurch gleich). */
  body main.has-topicnav.has-topicnav.has-topicnav .usp-strip { background: var(--bg-alt); border-bottom: 0; }
  body main.has-topicnav.has-topicnav.has-topicnav .usp-strip .usp-grid { background: var(--bg); border-bottom: 1px solid var(--border); }
  /* im Dunkelmodus traegt das Band selbst #252525, das wandert mit aufs Raster */
  html[data-theme="dark"] body main.has-topicnav.has-topicnav.has-topicnav .usp-strip .usp-grid { background: #252525; }
}
/* Ab 771 Pixeln steht der Themenbaum links neben dem Inhalt, die Inhaltsspalte
   ist dadurch 783 statt 1.220 Pixel breit. Vierer-Raster haetten dort 184 Pixel
   je Karte und der Kartentext bricht an beliebiger Wortgrenze, deshalb laufen
   sie bis 1.719,98 Pixel zweispaltig. Ab 1.720 Pixeln traegt der freie
   Seitenrand die Navigation, dort steht die volle Breite wieder zur Verfuegung.
   Dreier-Raster gehoeren nicht dazu: .kdtp-grid behaelt 248 Pixel je Karte,
   und die drei Preisbeispiele regelt der Block darunter. */
@media (min-width: 771px) {
  body main.has-topicnav.has-topicnav.has-topicnav .kdtp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 771px) and (max-width: 1719.98px) {
  body main.has-topicnav.has-topicnav.has-topicnav .usp-grid,
  body main.has-topicnav.has-topicnav.has-topicnav .lk-cards,
  body main.has-topicnav.has-topicnav.has-topicnav .bl-zg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Die drei Preisbeispiele standen bis zum 04.09.2026 in der Zweispaltenregel
   darueber, obwohl auch sie ein Dreier-Raster sind. Zwei Spalten lassen das
   dritte Beispiel allein in einer zweiten Zeile stehen, und zwischen
   Bezeichnung und Preis klaffen dabei 109 bis 126 Pixel statt der 18,8 auf
   lektorat.html. Beides gemessen an der Live-Seite. Bezeichnung und Preis
   brechen beide nicht um, drei Spalten brauchen deshalb rund 500 Pixel. Genau
   die fehlen zwischen 1.060 und 1.359,98 Pixeln, wo der Themenbaum dem Raster
   nur 392 bis 546 Pixel laesst und drei Spalten um bis zu 26 Pixel
   ueberlaufen. In dieser Engstelle stapeln die Beispiele, genau wie sie es
   unterhalb von 640 Pixeln ohnehin tun. */
@media (min-width: 771px) {
  body main.has-topicnav.has-topicnav.has-topicnav .kd-pe-grid { grid-template-columns: repeat(3, auto); }
}
@media (min-width: 1060px) and (max-width: 1359.98px) {
  body main.has-topicnav.has-topicnav.has-topicnav .kd-pe-grid { grid-template-columns: 1fr; }
  body main.has-topicnav.has-topicnav.has-topicnav .kd-pe-item + .kd-pe-item { border-top: 1px solid var(--border); border-left: 0; }
}
/* Notnagel aus css/site-shell.css: solange der Themenbaum hier falsch
   injiziert war, hat die typ-ki-Regel ihn per !important aus dem Layout
   genommen. Die Injektion ist repariert, deshalb gilt hier wieder das
   normale Verhalten. Der Weg ueber !important ist noetig, weil eine
   Aenderung an der Shell den Cache-Schluessel jeder Seite wechselt. */
@media (min-width: 1720px) {
  html[data-kd-theme-page="typ-ki"] body main.has-topicnav.has-topicnav.has-topicnav { display: grid !important; }
  html[data-kd-theme-page="typ-ki"] body main.has-topicnav.has-topicnav.has-topicnav > .topicnav-wrap { display: contents !important; }
  html[data-kd-theme-page="typ-ki"] body main.has-topicnav.has-topicnav.has-topicnav > .content-col { width: auto !important; }
}
@media (max-width: 770px) {
  html[data-kd-theme-page="typ-ki"] body main.has-topicnav.has-topicnav.has-topicnav > .topicnav-wrap { display: contents !important; }
}
/* scan-pack block 4 */
main .pk-reports{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem;align-items:start;margin-top:1.6rem}
  main .pk-reports figure{margin:0;background:var(--bg,#fff);border:1px solid var(--border,#e5e7eb);border-radius:12px;padding:.75rem;box-shadow:0 6px 24px rgba(15,23,42,.08)}
  main .pk-reports img{width:100%;height:auto;display:block;border-radius:8px}
  main .pk-reports figcaption{font-size:.85rem;color:var(--muted,#4b5563);line-height:1.6;margin-top:.65rem}
  main .pk-reports .pk-report-tag{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green,#006b3e);margin-bottom:.4rem}
  @media (max-width:860px){main .pk-reports{grid-template-columns:1fr}}
  main .prose-body p a,main .prose-body li a,main .lk-card p a,main .faq-col p a,main .pk-reports p a{color:var(--green,#006b3e);text-decoration:underline;text-underline-offset:2px}
  main .prose-body ol{counter-reset:pk-schritt;display:flex;flex-direction:column;gap:.35rem;margin:.5rem 0 1rem;padding-left:0;list-style:none}
  main .prose-body ol>li::before{counter-increment:pk-schritt;content:counter(pk-schritt) ".";width:auto;height:auto;border-radius:0;background:none;color:var(--green,#006b3e);font-weight:700;margin-top:0;min-width:1.15rem}
/* scan-pack block 5 */
main .pk-stats{background:var(--bg,#fff);border-bottom:1px solid var(--border,#e5e7eb);padding:1.15rem 0 .95rem}
  main .pk-stats .stats-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.5rem;text-align:center}
  main .pk-stats .stat-value{font-size:clamp(1.45rem,2.4vw,2.4rem);font-weight:800;color:#00a65a;line-height:1.1}
  main .pk-stats .stat-label{font-size:.875rem;color:var(--muted,#4b5563);margin-top:.3rem;line-height:1.35}
  @media (min-width:771px) and (max-width:1719.98px){main.has-topicnav .pk-stats .stats-grid{gap:1rem}main.has-topicnav .pk-stats .stat-label{font-size:.78rem}}
  @media (min-width:1720px){main.has-topicnav .pk-stats{background:var(--bg-alt,#f8f9fa);border-bottom:0;padding:0}main.has-topicnav .pk-stats .wrap{background:var(--bg,#fff);border-bottom:1px solid var(--border,#e5e7eb);padding-top:1.15rem;padding-bottom:.95rem}html[data-theme="dark"] main.has-topicnav .pk-stats .wrap{background:#252525}}
  @media (max-width:640px){main .pk-stats .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.15rem}}
/* scan-pack block 6 */
.kd-up-illu{position:relative;border:1.5px solid #e5e7eb;border-radius:10px;background:#fff;overflow:hidden}
      .kd-up-illu img{position:absolute;top:16px;left:16px;width:calc(100% - 32px);height:calc(100% - 32px);object-fit:contain}
      .kd-up-illu--source-comparison{margin:0;padding:16px;display:flex;flex-direction:column;justify-content:center;gap:14px}
      .kd-up-illu--source-comparison img{position:static;width:100%;height:auto;object-fit:contain;border-radius:10px}
      .kd-up-illu--source-comparison figcaption{font-size:.86rem;color:#374151;line-height:1.55}
      .kd-up-illu--source-comparison figcaption span{display:block}
      .kd-up-illu--source-comparison figcaption .kd-up-cap-title{color:#111;font-size:.94rem;font-weight:700;margin-bottom:4px}
      @media (min-width:861px){.kd-up-cols{display:flex;gap:32px;align-items:stretch}.kd-up-cols>.kd-up-illu,.kd-up-cols>.kd-up-form{flex:1 1 0;min-width:0}}
      @media (max-width:860px){.kd-up-illu{display:none}}