/* ki-detektor: inline */
/* ─── 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,.85); }

    /* ─── 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;
  }
/* Kopfband als umbrechende Reihe statt festem Raster: das feste Raster konnte nur die Textspalte schrumpfen lassen, hier gemessene 239 bis 302 Pixel bei 1100 und 1366. Die Textspalte haelt jetzt 340 Pixel, die zweite Spalte 300 und hoechstens ihre bisherigen 380, und sobald beide mit dem Abstand nicht mehr nebeneinander passen, bricht die Reihe um. Breite Fenster bleiben unveraendert, weil die zweite Spalte am Deckel einfriert und den Rest zurueckgibt. */
.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; }

    /* ─── Kennzahlenband ─────────────────────────────── */
    /* Die eigene Klasse kd-stats steht neben stats-bar, damit die
       Dunkelmodus-Regeln der Shell greifen. Das Band sitzt als erstes Element
       der Inhaltsspalte, genau dort, wo vorher das Vorteilsband stand. Ab
       1720px zieht tnav-produktseite die Spalte ueber den Navigationsrand,
       weisser Grund gehoert dort aufs Raster statt hinter den Navikasten:
       dann traegt .wrap das Weiss und das Band selbst das Seitengrau. */
    .kd-stats { background: var(--bg); border-bottom: 1px solid var(--border); padding: 1.15rem 0 .95rem; }
    .kd-stats .stats-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; text-align: center; }
    .kd-stats .stat-value { font-size: clamp(1.45rem, 2.4vw, 2.4rem); font-weight: 800; color: #00a65a; line-height: 1.1; }
    .kd-stats .stat-label { font-size: .875rem; color: var(--muted); margin-top: .3rem; line-height: 1.35; }
    @media (max-width: 640px) { .kd-stats .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.15rem; } }

    /* ─── 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; }
/* ki-detektor: hero-h2-fix */
h1.hero-label ~ h2 { font-size: clamp(1.85rem, 4.5vw, 2.9rem) !important; line-height: 1.12 !important; font-weight: 700 !important; letter-spacing: -.025em !important; margin-bottom: 1.2rem !important; }
  .footer-social { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-top: .5rem; }
  .footer-social a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.7) !important; transition: background .15s, color .15s; text-decoration: none !important; }
  .footer-social a:hover { background: rgba(255,255,255,.2) !important; color: #fff !important; }
/* ki-detektor: css/hero-card-header-v4.css */
/* Rechte Desktop-Hero-Cards beginnen auf der Oberkante der grossen H2. */
@media(min-width:821px){
  .hero.hero-card-top{padding-top:60px}
  .hero.hero-card-top>.hero-inner{align-items:start}
}
@media(min-width:961px){
  .hero.hero-card-top:not(.hero-card-flush)>.hero-inner>.hero-card,
  .hero.hero-card-top:not(.hero-card-flush)>.hero-inner>.hero-result-img{margin-top:44.328125px}
}
/* Die lange Uebersetzungs-Pill ist am schmalsten Desktop zweizeilig. */
@media(min-width:961px) and (max-width:971px){
  .hero.hero-card-top.hero-card-heading-wrap>.hero-inner>.hero-card,
  .hero.hero-card-top.hero-card-heading-wrap>.hero-inner>.hero-result-img{margin-top:65.328125px}
}
@media(min-width:961px){
  .hero.hero-card-reference>.hero-inner{align-items:start}
  .hero.hero-card-reference>.hero-inner>.hero-card{margin-top:97.1875px}
}
/* Steht eine Autorzeile zwischen H1 und H2 (Pflicht seit 03.11.2026), liegt die H2 um die Zeilenhoehe tiefer. Die Zeile bekommt feste Mindesthoehe (zweizeilig am schmalen Desktop), die Card den Versatz 44.328125 + 41.1875 + 25.578125. */
@media(min-width:961px){
  .hero.hero-card-top.hero-card-autorzeile .autor-zeile{min-height:41.1875px;box-sizing:border-box}
  .hero.hero-card-top.hero-card-autorzeile>.hero-inner>.hero-card,
  .hero.hero-card-top.hero-card-autorzeile>.hero-inner>.hero-result-img{margin-top:111.09375px}
}
/* ki-detektor: tnav-produktseite */
/* 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; }
  /* dieselbe Umkehr fuer das Kennzahlenband: das Weiss sitzt auf dem Raster,
     das Band selbst traegt das Seitengrau */
  body main.has-topicnav.has-topicnav.has-topicnav .kd-stats { background: var(--bg-alt); border-bottom: 0; padding: 0; }
  body main.has-topicnav.has-topicnav.has-topicnav .kd-stats .wrap { background: var(--bg); border-bottom: 1px solid var(--border); padding-top: 1.15rem; padding-bottom: .95rem; }
  html[data-theme="dark"] body main.has-topicnav.has-topicnav.has-topicnav .kd-stats .wrap { 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) {
  /* Fuenf Kennzahlen auf 783 statt 1.220 Pixel: das Raster bleibt fuenfspaltig,
     damit die Reihe als ein Band lesbar bleibt, Abstand und Beschriftung
     ruecken dafuer enger zusammen. */
  body main.has-topicnav.has-topicnav.has-topicnav .kd-stats .stats-grid { gap: 1rem; }
  body main.has-topicnav.has-topicnav.has-topicnav .kd-stats .stat-label { font-size: .78rem; }
  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; }
}
/* ki-detektor: inline */
.stats-bar .usp-detail{display:none}
  .stats-bar .stat-item[data-usp-key]{position:relative;cursor:pointer;border-radius:10px;padding:.4rem 0 .5rem;transition:background .16s ease,box-shadow .16s ease}
  .stats-bar .stat-item[data-usp-key] .stat-label{text-decoration:underline dotted rgba(0,107,62,.45);text-underline-offset:3px}
  .stats-bar .stat-item[data-usp-key]:hover{background:#ecf7f1}
  .stats-bar .stat-item[data-usp-key]:focus-visible{outline:2px solid #00a65a;outline-offset:2px}
  .stats-bar .stat-item[aria-expanded="true"]{background:#ecf7f1;box-shadow:inset 0 2px 0 0 #00a65a}
  .stats-bar .usp-cue{display:inline-flex;align-items:center;gap:.22rem;margin-top:.35rem;font-size:.72rem;font-weight:700;color:#006b3e;line-height:1}
  .stats-bar .usp-cue svg{transition:transform .22s ease}
  .stats-bar .stat-item[aria-expanded="true"] .usp-cue svg{transform:rotate(180deg)}
  .stats-bar .usp-drawer{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;transition:grid-template-rows .28s ease,opacity .2s ease,margin-top .28s ease}
  .stats-bar .usp-drawer>div{overflow:hidden;min-height:0}
  .stats-bar .usp-drawer[data-open]{grid-template-rows:1fr;opacity:1;margin-top:1rem}
  .stats-bar .usp-drawer-box{position:relative;background:#ecf7f1;border:1px solid #cfe7db;border-radius:10px;padding:.85rem 2.4rem .9rem 1.1rem;text-align:left}
  .stats-bar .usp-drawer-box::before{content:"";position:absolute;top:-7px;left:var(--usp-caret,50%);width:12px;height:12px;background:#ecf7f1;border-left:1px solid #cfe7db;border-top:1px solid #cfe7db;transform:translateX(-50%) rotate(45deg);transition:left .22s ease}
  .stats-bar .usp-drawer-titel{display:block;font-size:.95rem;font-weight:700;color:#1a1a2e;margin-bottom:.15rem}
  .stats-bar .usp-drawer-slot{font-size:.9rem;line-height:1.6;color:#374151}
  .stats-bar .usp-drawer-slot a{color:#0f7f4d}
  .stats-bar .usp-drawer-slot a:hover,.stats-bar .usp-drawer-slot a:focus-visible{color:#0a5c38}
  .stats-bar .usp-detail-mehr{display:inline-block;margin-top:.6rem;font-size:.88rem}
  .stats-bar .usp-detail-mehr::after{content:"\00a0\203A"}
  .stats-bar .usp-drawer-close{position:absolute;top:.3rem;right:.45rem;width:1.7rem;height:1.7rem;border:0;background:none;cursor:pointer;color:#4b5563;font-size:1.2rem;line-height:1;border-radius:6px}
  .stats-bar .usp-drawer-close:hover{background:rgba(0,0,0,.06);color:#1a1a2e}
  /* Dunkelmodus nur fuer den Kasten, nie fuer das Band.
     Der Kasten bringt mit `.usp-drawer-box` seine eigene dunkle Flaeche mit,
     helle Schrift darauf stimmt also. Kachel, Beschriftung und Klickhinweis
     liegen dagegen auf dem Band, und das ist seit dem Rueckbau des
     Dunkelmodus auch bei `data-theme="dark"` weiss. Die frueheren Regeln
     dafuer haben den Hinweis in Hellgruen auf Weiss gesetzt: Kontrast 1,77
     statt der geforderten 4,5. Gemessen am 19.08.2026, der Fehler war seit
     dem Rueckbau blind. Wer hier wieder dunkel faerbt, muss zuerst das Band
     dunkel bekommen. */
  html[data-theme="dark"] .stats-bar .usp-drawer-box,html[data-theme="dark"] .stats-bar .usp-drawer-box::before{background:#1b2b23;border-color:#2f4a3c}
  html[data-theme="dark"] .stats-bar .usp-drawer-titel{color:#e8e8e8}
  html[data-theme="dark"] .stats-bar .usp-drawer-slot{color:#c2c8cd}
  html[data-theme="dark"] .stats-bar .usp-drawer-slot a{color:#3ddc97}
  html[data-theme="dark"] .stats-bar .usp-drawer-slot a:hover,html[data-theme="dark"] .stats-bar .usp-drawer-slot a:focus-visible{color:#7cebbb}
  html[data-theme="dark"] .stats-bar .usp-drawer-close:hover{background:rgba(255,255,255,.08);color:#e8e8e8}
  @media (prefers-reduced-motion:reduce){.stats-bar .usp-drawer,.stats-bar .usp-cue svg,.stats-bar .usp-drawer-box::before{transition-duration:.01ms}}
/* ki-detektor: dd-reco-css */
.ps-host{background:var(--bg-alt,#f5f7fa);padding:1.25rem 1.5rem .25rem}
.ps-wrap{max-width:1120px;margin:0 auto;display:flex;justify-content:center}
.ps-card{position:relative;background:#fff;border:1px solid var(--border,#e5e7eb);border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.08);padding:1.05rem 1.7rem .9rem;width:-moz-fit-content;width:fit-content;max-width:100%}
.ps-pill{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);background:#fff;border:1px solid var(--border,#e5e7eb);border-radius:999px;padding:.16rem .8rem;font-size:.64rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#6b7280;box-shadow:0 1px 3px rgba(0,0,0,.05);white-space:nowrap}
.ps-desc{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:.4rem 1.1rem}
.ps-cell{display:flex;align-items:center;gap:.8rem;min-width:0;text-decoration:none;color:inherit;padding:.15rem 0}
.ps-cell+.ps-cell{border-left:1px solid var(--border,#e5e7eb);padding-left:1.1rem}
.ps-cell img{height:30px;width:auto;max-width:92px;object-fit:contain;flex-shrink:0;opacity:.92}
.ps-cell .t{min-width:0}
.ps-cell .t b{display:block;font-size:.82rem;font-weight:700;color:var(--text,#1a1a2e);line-height:1.2}
.ps-cell .t span{font-size:.75rem;color:#64748b;line-height:1.25;display:block}
@media(max-width:620px){.ps-cell+.ps-cell{border-left:0;padding-left:0}}
/* ki-detektor: ps-topstrip-fix */
@media(min-width:771px){main.has-topicnav>.topicnav-wrap{display:block;grid-column:1;align-self:stretch}main.has-topicnav>.content-col{grid-column:2}}@media(min-width:1440px){main.has-topicnav>.topicnav-wrap{display:flex;justify-content:flex-end;padding-right:2.1rem;box-sizing:border-box}main.has-topicnav>.topicnav-wrap>.topicnav{margin-right:0}}@media(min-width:1100px){.ps-logos,.ps-desc{flex-wrap:nowrap}.ps-desc{gap:.4rem .7rem}.ps-cell+.ps-cell{padding-left:.7rem}.ps-cell img{height:26px}.ps-cell .t b{font-size:.78rem}.ps-cell .t span{font-size:.71rem}.ps-cell .t b,.ps-cell .t span{white-space:nowrap}}
/* ki-detektor: css/topicnav-edge.css */
/* Seiten mit Partnerleiste (`.topicnav-lead`) tragen dieses Stylesheet nicht
   alle absichtlich: der Kopf wird ueber die Seitenfamilien geteilt, deshalb
   liegt der Link auch auf rund 228 Ratgeber- und Wissensseiten. Echte
   Randnavi-Seiten sind allein die Landingpages aus
   `_topicnav_inject.EDGE_NAV_SLUGS`; nur bei ihnen enthaelt die Inhaltsspalte
   weder `.article` noch `.wrap`, sondern volle Seitenflaechen. Genau diese
   Unterscheidung steht unten in jedem Selektor: ab 1720 Pixeln darf die
   Navigation nur auf ihnen an den freien Seitenrand wandern. Auf allen
   anderen bleibt sie in Spalte 1 des Rasters, sonst reisst zwischen Baum und
   Inhaltskarte eine Luecke von 222 bis 363 Pixeln auf. */
@media(min-width:771px) and (max-width:1719.98px){
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead)>.topicnav-lead{grid-column:2!important;grid-row:1;min-width:0}
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead)>.topicnav-wrap{display:block;grid-column:1;grid-row:1/span 2;align-self:stretch}
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead)>.topicnav-wrap>.topicnav{margin:2rem 0}
  /* Nur die Artikelspalte gehoert in Zeile 2. Der Nachtragsblock nach der
     Partnerleiste traegt dieselbe Klasse content-col und landete dadurch in
     derselben Gitterzelle, also passgenau ueber dem Artikel: sichtbar auf 142
     Seiten zwischen 771 und 1719 Pixeln, also auf den haeufigsten
     Desktopbreiten. */
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead)>.content-col:not(.content-col-after-partner){grid-column:2;grid-row:2;min-width:0}
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead)>.content-col.content-col-after-partner{grid-column:2;grid-row:auto;min-width:0}
}
@media(min-width:1440px) and (max-width:1719.98px){
  body main.has-topicnav.has-topicnav.has-topicnav:not(:has(>.content-col>.wrap)):has(>.topicnav-lead)>.topicnav-wrap>.topicnav{width:226px;margin:2rem 4.45rem 2rem auto}
}
/* Ab 1720 Pixeln gilt fuer alle Seiten, die keine echten Randnavi-Seiten sind,
   dieselbe Rasterlage wie darunter. Ohne diesen Block faellt der Wrapper auf
   `display:contents` zurueck, die Partnerleiste zieht sich ueber beide
   Spalten und der Baum rutscht unter sie. */
@media(min-width:1720px){
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead):is(:has(>.content-col>.wrap),:has(>.content-col>.article))>.topicnav-lead{grid-column:2!important;grid-row:1;min-width:0}
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead):is(:has(>.content-col>.wrap),:has(>.content-col>.article))>.topicnav-wrap{display:block;grid-column:1;grid-row:1/span 2;align-self:stretch}
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead):is(:has(>.content-col>.wrap),:has(>.content-col>.article))>.topicnav-wrap>.topicnav{margin:2rem 0}
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead):is(:has(>.content-col>.wrap),:has(>.content-col>.article))>.content-col:not(.content-col-after-partner){grid-column:2;grid-row:2;min-width:0}
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead):is(:has(>.content-col>.wrap),:has(>.content-col>.article))>.content-col.content-col-after-partner{grid-column:2;grid-row:auto;min-width:0}
  /* Artikelseiten zentrieren ihre 800-Pixel-Spalte im Viewport. Der Baum
     steht deshalb rechtsbuendig in Spalte 1, genau wie zwischen 1440 und
     1719 Pixeln. Diese Regel muss hinter der Zeile mit `margin:2rem 0`
     stehen, beide Selektoren sind gleich spezifisch. */
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead):has(>.content-col>.article)>.topicnav-wrap>.topicnav{width:226px;margin:2rem 4.45rem 2rem auto}
}
@media(min-width:1720px){
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead):not(:has(>.content-col>.wrap)):not(:has(>.content-col>.article)){position:relative}
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead):not(:has(>.content-col>.wrap)):not(:has(>.content-col>.article))>.topicnav-wrap{display:block;position:absolute;top:0;bottom:0;left:calc(50% - 848px);width:226px;z-index:5;background:transparent!important;border:0!important}
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead):not(:has(>.content-col>.wrap)):not(:has(>.content-col>.article))>.topicnav-wrap>.topicnav{width:226px;margin:2rem 0}
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead)>.content-col .section-header,
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead)>.content-col>.cta-banner>:is(h2,h3,p){box-sizing:border-box;width:min(calc(100% - 3rem),1168px);margin-left:auto;margin-right:auto}
  html[data-kd-theme-page="typ-ki"] body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead)>.topicnav-wrap{display:block!important}
  html[data-kd-theme-page="typ-ki"] body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead)>.content-col{width:auto!important;grid-column:2!important}
}
/* ki-detektor: inline */
.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}
      @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}}
/* ki-detektor: inline */
@media(max-width:770px){main.has-topicnav>.content-col>article>section>.wrap,main.has-grpnav>.content-col>article>section>.wrap{box-sizing:border-box;padding-left:1.5rem;padding-right:1.5rem}}
/* ki-detektor: inline */
@media(min-width:1720px){body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead)>.content-col>article>.cta-banner>:is(h2,h3,p){box-sizing:border-box;width:min(calc(100% - 3rem),1168px);margin-left:auto;margin-right:auto}}
/* ki-detektor: inline */
.kdtp-wrap{max-width:1040px;margin:2.6rem auto;padding:0 1.25rem;font-family:inherit}
.kdtp-head{display:flex;align-items:center;justify-content:center;gap:.5rem .7rem;flex-wrap:wrap;margin-bottom:1.2rem;text-align:center}
.kdtp-head .kdtp-htxt{font-size:1.05rem;font-weight:700;color:#1a1a2e}
.kdtp-head a{color:#16794a;text-decoration:none;font-size:.9rem;font-weight:600;white-space:nowrap}
.kdtp-head a:hover{text-decoration:underline}
.kdtp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}@media(max-width:770px){.kdtp-grid{grid-template-columns:1fr}}@media(max-width:1100px){main.has-topicnav .kdtp-grid{grid-template-columns:1fr}}
.kdtp-card{border:1px solid #0f5c38;border-radius:12px;background:linear-gradient(to right,#00c06a,#005430);padding:1.1rem 1.2rem;display:flex;flex-direction:column;box-shadow:0 2px 10px rgba(22,121,74,.22)}
.kdtp-card .kdtp-ttl{font-size:1rem;font-weight:700;margin:0 0 .45rem;color:#fff;line-height:1.3}
.kdtp-card .kdtp-txt{font-size:.92rem;line-height:1.62;color:#fff;margin:0 0 .9rem;flex:1}
.kdtp-card .kdtp-meta{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:#fff;margin-top:auto;flex-wrap:wrap}
.kdtp-card .kdtp-auth{font-weight:700;color:#fff}
/* ki-detektor: kd-faq-mehr-css */
.kd-faq-mehr{background:#f8fafc;padding:2.25rem 0}.kd-faq-mehr-titel{font-size:1rem;font-weight:700;color:#111827;margin:0 0 .9rem}.kd-faq-mehr-liste{display:grid;grid-template-columns:1fr 1fr;gap:0 2rem;align-items:start}.kd-faq-mehr details.faq-item{background:none;border:0;border-bottom:1px solid #e5e7eb;border-radius:0}.kd-faq-mehr details.faq-item summary{padding:.8rem 0;font-weight:500;font-size:.9rem;color:#1f2937}.kd-faq-mehr details.faq-item .faq-body{padding:0 0 1rem}@media(max-width:768px){.kd-faq-mehr-liste{grid-template-columns:1fr}}
/* ki-detektor: kd-mehr-css */
.kd-mehr{display:block;background:#f8fafc;border-top:1px solid #e5e7eb;padding:2.25rem 0}.kd-mehr-titel{font-size:1rem;font-weight:700;color:#111827;margin:0 0 1rem}.kd-mehr-karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:1rem}.kd-mehr-karte{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:1rem 1.1rem}.kd-mehr-karte-titel{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#64748b;margin:0 0 .55rem}.kd-mehr-karte ul{list-style:none;margin:0;padding:0}.kd-mehr-karte.kd-mehr-breit ul{columns:3 220px;column-gap:2rem}.kd-mehr-karte li{break-inside:avoid;margin:0;padding:0}.kd-mehr-karte li::before{content:none}.kd-mehr .kd-mehr-karte a{display:flex;gap:.45rem;color:#1f2937;border:0;font-size:.875rem;padding:.28rem 0}:root .kd-mehr .kd-mehr-karte a[href]{text-decoration-line:none!important}.kd-mehr-karte a::before{content:"\203A";color:#006b3e;font-weight:700;flex:none}.kd-mehr-karte ul+.kd-mehr-karte-titel{margin-top:.9rem}.kd-mehr .kd-mehr-karte a:hover{color:#006b3e}