/* preisrechner: 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; margin: 0; padding: 0; }
    body { font-family: var(--font); color: var(--text); background: var(--bg-alt); line-height: 1.65; margin: 0; padding: 0; }
    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; }

    /* ─── 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: 24px 0 36px;
    }
    .hero-inner {
      max-width: var(--max); margin: 0 auto; padding: 0 1.5rem;
      display: grid; grid-template-columns: 1fr 440px; gap: 3.5rem; align-items: center;
    }
    .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-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:last-child { border-bottom: none; }
    .hrow:hover { background: var(--bg-alt); }
    .hrow-icon {
      width: 38px; height: 38px; flex-shrink: 0; border-radius: 8px; overflow: hidden;
    }
    .hrow-icon img { width: 100%; height: 100%; object-fit: cover; }
    .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;
    }
    .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);
    }
    .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); }

    /* ─── Product Cards ──────────────────────────────── */
    .cards-grid { display: grid; grid-template-columns: repeat(3, 340px); gap: 1.25rem; justify-content: start; }
    .pcard {
      background: var(--bg); border: 1px solid var(--border);
      border-radius: var(--radius); overflow: hidden;
      transition: box-shadow .2s, transform .2s, border-color .2s;
    }
    .pcard:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--green); }
    .pcard-img {
      background: var(--bg-alt); padding: 1.5rem;
      display: flex; align-items: center; justify-content: center;
      border-bottom: 1px solid var(--border); height: 110px;
    }
    .pcard-img img { height: 70px; width: auto; object-fit: contain; }
    .pcard-body { padding: 1.4rem; }
    .pcard-price {
      font-size:14px; font-weight: 700; color: var(--green);
      background: var(--green-bg); padding: .2rem .55rem;
      border-radius: 5px; display: inline-block; margin-bottom: .65rem;
    }
    .pcard h3 { margin-bottom: .45rem; }
    .pcard p { font-size:14px; margin-bottom: 1rem; }
    .pcard-list { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1.1rem; }
    .pcard-list li { display: flex; align-items: flex-start; gap: .4rem; font-size:14px; color: var(--muted); }
    .pcard-list li::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; margin-top: .44rem; }
    .pcard a { font-size:14px; font-weight: 600; color: var(--green); display: inline-flex; align-items: center; gap: .3rem; }
    .pcard a:hover { gap: .5rem; }

    /* ─── Steps ──────────────────────────────────────── */
    .steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }
    .step { display: flex; flex-direction: column; align-items: center; text-align: center; }
    .step-n {
      width: 44px; height: 44px; border-radius: 50%;
      background: var(--green); color: #fff; font-size: .95rem; font-weight: 700;
      display: flex; align-items: center; justify-content: center; margin-bottom: .9rem;
    }
    .step h3 { margin-bottom: .35rem; }
    .step p { font-size:14px; }

    /* ─── Lektoren ───────────────────────────────────── */
    .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; }

    /* ─── FAQ ────────────────────────────────────────── */
    .faq-list { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.5rem; }
    .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; }
    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 ul { margin: .5rem 0 0 1rem; display: flex; flex-direction: column; gap: .3rem; }
    .faq-links { display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin-top: 1.25rem; }
    .faq-links a { font-size:14px; color: var(--green); text-decoration: underline; }

    /* ─── Roter Faden ────────────────────────────────── */
    .rfcheck-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
    .rfcard {
      background: var(--bg); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 1.5rem;
    }
    .rfcard h3 { margin-bottom: .6rem; color: var(--green); }
    .rfcard ul { display: flex; flex-direction: column; gap: .35rem; }
    .rfcard li { display: flex; align-items: flex-start; gap: .45rem; font-size:14px; color: var(--muted); }
    .rfcard li::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; margin-top: .44rem; }

    /* ─── Datenschutz ────────────────────────────────── */
    .trust-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    .trust-box {
      background: var(--bg); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 1.5rem;
      display: flex; gap: 1rem; align-items: flex-start;
    }
    .trust-box-ico {
      width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
      background: var(--green-bg); color: var(--green);
      display: flex; align-items: center; justify-content: center;
    }
    .trust-box h3 { margin-bottom: .4rem; }
    .trust-box ul { display: flex; flex-direction: column; gap: .28rem; }
    .trust-box li { font-size:14px; color: var(--muted); display: flex; align-items: flex-start; gap: .4rem; }
    .trust-box li::before { content: ""; display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--green); flex-shrink: 0; margin-top: .46rem; }

    /* Bewertungsbadge direkt über den Zahlungsarten */
    .kd-tp-compact {
      display: flex; align-items: center; justify-content: flex-start; gap: 7px;
      width: max-content; max-width: 100%; margin: 0 0 2px; padding: 0;
      border: 0; border-radius: 0; background: transparent; box-shadow: none;
      color: #6b7280; font-size: 12px; line-height: 1.25; text-decoration: none;
      white-space: nowrap;
    }
    .kd-tp-compact .kd-tp-star { color: #16794a; font-size: 14px; line-height: 1; }
    .kd-tp-compact strong { color: #303640; font-size: 13px; font-weight: 700; }

    /* ─── 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; }
    .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); }

    /* ─── 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 .wrap { max-width: 1240px; }
    .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 ─────────────────────────────────── */
    @media (max-width: 960px) {
      .hero-inner { grid-template-columns: 1fr; }
      .hero-card { display: none; }
      .usp-grid { grid-template-columns: repeat(2, 1fr); }
      .cards-grid { grid-template-columns: repeat(2, 340px); }
      .steps-grid { grid-template-columns: repeat(2, 1fr); }
      .lk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .faq-cols { grid-template-columns: 1fr; }
      .rfcheck-grid { grid-template-columns: 1fr 1fr; }
      .trust-cols { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 770px) {
      .topbar { display: none; }
      .nav-links, .nav-cta { display: none; }
      .nav-burger { display: flex; }
    }
    @media (max-width: 640px) {
      .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); }
      .cards-grid { grid-template-columns: repeat(2, 340px); }
      .steps-grid { grid-template-columns: 1fr 1fr; }
      .lk-cards { grid-template-columns: 1fr; }
      .rfcheck-grid { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-bottom { flex-direction: column; align-items: flex-start; }
    }
    @media (max-width: 720px) {
      .cards-grid { grid-template-columns: 340px; }
    }
  
    h1.hero-label { font-size: 14px !important; font-weight: 700 !important; line-height: 1.5 !important; }
/* preisrechner: hero-h2-fix */
.hero { border-bottom: none !important; }
  h1.shop-title { 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; }
/* preisrechner: shop-compact-header */
.shop-hero { padding: 42px 0 10px; }
  .shop-hero h1.shop-title { margin-bottom: 0 !important; }
  @media (max-width: 640px) {
    .shop-hero { padding: 39px 0 7px; }
    .shop-hero h1.shop-title { font-size: clamp(1.55rem, 6.5vw, 1.9rem) !important; }
  }
/* preisrechner: inline */
#kd-detail-panel>div{background:#fff!important;border-radius:10px;padding:16px;border:1px solid #e5e7eb;}
/* Die Merkmalsliste des Produkts ist eine Textwand aus bis zu siebzehn Zeilen und
   steht im Kaufpfad zwischen Konfiguration und Bezahlen. Sie erklaert, sie fragt
   nichts ab, deshalb ist sie zugeklappt und auf Wunsch zu oeffnen. Der Inhalt
   bleibt im Dokument, nur eben verborgen. */
/* Der Schalter muss als Schalter zu erkennen sein: umrandet, mit hellem Grund
   und einem Pfeil in Textgroesse. Die erste Fassung war das blosse Wort Details
   mit einem 11 Pixel kleinen Dreieck daneben, und niemand sah, dass sich dort
   etwas oeffnen laesst. Die Beschriftung nennt den Zustand, damit auch ohne den
   Pfeil klar ist, was ein Klick tut. */
#kd-detail-panel .kd-detail-more>summary{cursor:pointer;list-style:none;display:inline-flex;
  align-items:center;gap:9px;font-size:14px;font-weight:700;padding:8px 14px;
  border:1.5px solid currentColor;border-radius:9px;background:#fbfdfe;
  transition:background .15s;}
#kd-detail-panel .kd-detail-more>summary:hover{background:#f1f7fb;}
#kd-detail-panel .kd-detail-more>summary:focus-visible{outline:2px solid currentColor;
  outline-offset:2px;}
#kd-detail-panel .kd-detail-more>summary::-webkit-details-marker{display:none;}
#kd-detail-panel .kd-detail-more>summary::after{content:"▼";font-size:13px;line-height:1;
  margin-left:auto;transition:transform .15s;}
#kd-detail-panel .kd-detail-more[open]>summary::after{transform:rotate(180deg);}
#kd-detail-panel .kd-detail-more>summary .kd-detail-auf{display:none;}
#kd-detail-panel .kd-detail-more[open]>summary .kd-detail-zu{display:none;}
#kd-detail-panel .kd-detail-more[open]>summary .kd-detail-auf{display:inline;}
#kd-detail-panel .kd-detail-more>ul{margin:10px 0 0;padding-left:16px;}
#ed-845646987{background:transparent !important;overflow:visible !important;padding:0 !important;}
#kd-shop{font-family:Lato,'Noto Sans',sans-serif;color:#222;background:var(--bg-alt);max-width:100%;overflow-x:hidden;}
#kd-shop h2{font-family:Poppins,'Noto Sans',sans-serif;font-size:22px;font-weight:800;margin:0 0 6px;color:#222;}
#kd-shop h3{font-family:Poppins,'Noto Sans',sans-serif;font-size:16px;font-weight:700;margin:0 0 4px;color:#333;}
.kd-card{border:2px solid #e5e5e5;border-radius:12px;padding:16px 6px;cursor:pointer;background:#fff;
  text-align:center;transition:border-color .2s,box-shadow .2s,transform .15s;width:155px;flex:0 0 155px;box-sizing:border-box;}
.kd-card:hover{transform:translateY(-2px);}
.kd-card.kd-sel{background:#fafafa;}
#kd-shop-body #kd-prod-grid .kd-card:is(:hover,:focus-visible,.kd-sel){border-color:var(--kd-card-color)!important;opacity:1!important;filter:none!important;}
.kd-delbtn{border:none;border-radius:7px;padding:6px 12px;cursor:pointer;background:#fff;border:2px solid #e5e5e5;
  font-family:Lato,sans-serif;font-size:14px;text-align:left;display:flex;align-items:center;gap:6px;
  transition:background .2s,color .2s,border-color .2s;outline:none;min-height:0;color:#1a1a2e;}
.kd-delbtn:hover{background:var(--kd-color,#006b3e);color:#fff;border-color:var(--kd-color,#006b3e);}
.kd-delbtn:hover strong,.kd-delbtn:hover span{color:#fff!important;}
.kd-delbtn:active{outline:none;}
.kd-delbtn.kd-sel{background:var(--kd-color,#006b3e);color:#fff;border-color:var(--kd-color,#006b3e);}
.kd-delbtn.kd-sel strong,.kd-delbtn.kd-sel span{color:#fff!important;}
.kd-lieferbis{overflow:hidden;max-height:0;opacity:0;margin:0;transition:max-height .35s ease,opacity .35s ease,margin .35s ease;
  font-family:Lato,sans-serif;font-size:14px;font-weight:700;color:#1a1a2e;display:flex;align-items:center;gap:8px;padding-left:4px;}
.kd-lieferbis.kd-lb-open{max-height:40px;opacity:1;margin:2px 0 8px;}
.kd-lb-puls{width:9px;height:9px;border-radius:50%;background:var(--kd-color,#006b3e);flex:0 0 9px;animation:kdLbPuls 1.8s ease-in-out infinite;}
.kd-lb-zeit{font-variant-numeric:tabular-nums;white-space:nowrap;}
.kd-lb-z{display:inline-block;}
.kd-lb-z.kd-lb-neu{animation:kdLbRoll .35s ease-out;}
@keyframes kdLbPuls{0%,100%{background-color:var(--kd-color,#006b3e);}50%{background-color:color-mix(in srgb,var(--kd-color,#006b3e) 25%,#5bf5a8);}}
@keyframes kdLbRoll{from{transform:translateY(-70%);opacity:0;}to{transform:translateY(0);opacity:1;}}
html[data-theme="dark"] .kd-lieferbis{color:#e5e7eb;}
/* Reduzierte Bewegung: der Punkt blinkt nur in der Farbe, das ist keine Bewegung
   und bleibt deshalb an. Ohne diese Ausnahme stand er bei jedem still, der in
   Windows die Animationen ausgeschaltet hat (Nutzermeldung 10.10.2026). */
@media (prefers-reduced-motion:reduce){.kd-lieferbis{transition:none;}.kd-lb-z.kd-lb-neu{animation:none;}}
.kd-dot{width:44px;height:44px;border-radius:50%;background:#fff;color:#1a1a2e;border:2.5px solid #1a1a2e;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;
  flex-shrink:0;transition:background .2s,color .2s;font-family:Poppins,sans-serif;box-shadow:0 0 0 3px #fff;}
.kd-dot.kd-done{background:var(--kd-color,#006b3e);color:#fff;border-color:#fff;}
/* Der Hinweispfeil traegt sein Dunkelblau als stroke-Attribut: im Dark Mode
   war er sonst dunkel auf dunkel (gilt auch fuer den Shop im Kundenkonto). */
html[data-theme="dark"] .kd-hint-arrow path{stroke:var(--text,#f3f3f3);}
.kd-pay-dots{display:inline-block;margin-left:2px;}
.kd-pay-dots span{display:inline-block;animation:kdPayDotPulse 1.4s infinite both;}
.kd-pay-dots span:nth-child(2){animation-delay:.2s;}
.kd-pay-dots span:nth-child(3){animation-delay:.4s;}
@keyframes kdPayDotPulse{0%,80%,100%{opacity:.25;}40%{opacity:1;}}
@keyframes kdspin{to{transform:rotate(360deg);}}
.kd-dot.kd-active{border-color:var(--green);color:var(--green);}
.kd-line{flex:1 1 0;min-width:30px;height:2px;background:#1a1a2e;box-shadow:0 0 0 2px #fff;margin:21px 18px 0;}
.kd-step-col{position:relative;display:flex;flex-direction:column;align-items:center;flex:0 0 44px;}
.kd-step-label{position:absolute;top:100%;margin-top:5px;font-size:14px;font-weight:700;color:#1a1a2e;white-space:nowrap;}.kd-step-col:last-child .kd-step-label{right:0;}
.kd-badge{display:inline-block;background:#006b3e;color:#fff;font-size:14px;
  padding:2px 7px;border-radius:10px;font-weight:700;margin-right:5px;vertical-align:middle;}
@media(max-width:500px){
  .kd-badge{display:none!important;}
  .kd-delbtn{flex-wrap:wrap;gap:4px;padding:8px 8px;}
  .kd-delbtn strong{flex:1 1 100%;font-size:13px;}
  .kd-delbtn span{min-width:0!important;font-size:13px!important;white-space:normal!important;}
}
.kd-btn-p{background:linear-gradient(to right,#00c06a,#005430);color:#fff;border:none;padding:9px 26px;border-radius:8px;
  font-size:14px;font-weight:700;font-family:Poppins,sans-serif;cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.15);transition:opacity .15s,background .15s;}
.kd-btn-p:disabled{opacity:.35;cursor:default;}
#kd-btn-n2b:hover:not(:disabled){background:#111!important;color:#fff!important;}
.kd-btn-s{background:#f0f0f0;color:#555;border:none;padding:8px 18px;border-radius:8px;
  font-size:14px;cursor:pointer;}
.kd-preis-box{background:#fff;color:#006b3e;border:2px solid #006b3e;border-radius:12px;
  padding:20px 24px;display:flex;justify-content:space-between;align-items:center;}
.kd-pay-btn{flex:1;min-width:170px;border:none;padding:15px 18px;border-radius:9px;
  font-size:15px;font-weight:800;font-family:Poppins,sans-serif;cursor:pointer;transition:opacity .15s;}
.kd-pay-btn:hover{opacity:.85;}
.kd-shop-widget-section{padding-top:6px !important;}
.kd-shop-stepper-shell{margin-bottom:2px !important;}
.kd-shop-stepper-inner{max-width:540px !important;padding:2px 12px 10px !important;transform:translateY(16px);}
.kd-dot{width:38px;height:38px;font-size:15px;}
.kd-step-col{flex-basis:38px;}
.kd-step-label{font-size:12px;margin-top:3px;}
.kd-line{min-width:24px;margin:18px 13px 0;}
#kd-shop-body{padding:4px 16px 16px !important;}
#kd-pick-hint{align-items:flex-start !important;gap:10px !important;padding:0 0 16px !important;}
#kd-pick-hint>div{font-size:20px !important;line-height:1.2 !important;}
.kd-hint-arrow{width:44px !important;height:44px !important;margin-top:0 !important;}
@media(max-width:1000px){
  .nav-logo{display:none !important;}
  .topbar-left>a:first-child{display:none !important;}
}
@media(max-width:770px){
  .nav-logo{display:block !important;}
}
@media(max-width:800px){
  .kd-preis-label{white-space:normal !important;}
}
@media(max-width:900px){
  #kd-step-2>div>div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important;}
}
@media(max-width:520px){
  .kd-dot{width:36px !important;height:36px !important;font-size:15px !important;}
  .kd-step-col{flex:0 0 36px !important;}
  .kd-step-label{font-size:11px !important;}
  .kd-line{min-width:20px !important;margin:17px 10px 0 !important;}
}
@media(max-width:440px){
  .kd-hint-arrow{display:none !important;}
  #kd-pick-hint{justify-content:center !important;}
}
@media(max-width:420px){
  #ed-845646990{overflow:hidden !important;}
  #kd-shop-body{padding:8px !important;}
  #kd-step-2{padding:10px !important;}
  section>div[style*="padding:0 24px"]{padding:0 10px !important;}
  #kd-step-2 input,#kd-step-2 select,#kd-step-2 textarea{max-width:100% !important;box-sizing:border-box !important;}
  .kd-card{width:calc(50% - 4px) !important;flex:0 0 calc(50% - 4px) !important;min-width:0 !important;padding:12px 4px !important;}
  .kd-card img{max-height:48px !important;}
  .kd-card div{font-size:12px !important;}
  /* Delivery-Buttons: fixe Breite aufheben */
  .kd-delbtn{width:100% !important;flex:1 1 auto !important;min-width:0 !important;}
  #kd-del-grid>div{flex-wrap:wrap !important;}
  #kd-del-grid>div>span{flex-shrink:1 !important;font-size:11px !important;}
  #kd-del-grid>div>span>span{white-space:normal !important;}
  /* Inneres Formular-Grid auf 1 Spalte */
  #kd-extra-fields>div{grid-template-columns:1fr !important;}
  /* Roter-Faden-Check Text umbrechen */
  #kd-roter-faden-wrap label>span{font-size:13px !important;}
  #kd-scanzusatz-wrap label>span{font-size:13px !important;}
  .kd-preis-box{padding:12px !important;flex-direction:column !important;gap:8px !important;}
  #kd-preis{font-size:22px !important;}
  #kd-pick-hint>div{font-size:18px !important;}
  #kd-detail-panel>div{padding:10px !important;}
}
@media(max-width:650px){
  #kd-step-2>div>div[style*="grid-template-columns:1fr 1fr"][style*="gap:28px"]{grid-template-columns:1fr !important;}
  #kd-step-2 div[style*="grid-template-columns:1fr 1fr"][style*="gap:10px"]{grid-template-columns:1fr !important;}
  #kd-step-2{padding:16px !important;}
  #kd-step-3>div[style*="padding:22px 24px"]{padding:14px 16px !important;}
}
@media(max-width:600px){
  #kd-del-grid>div{flex-wrap:wrap !important;}
  #kd-del-grid>div>.kd-delbtn{width:100% !important;flex:1 1 100% !important;}
  #kd-del-grid>div>span{margin-top:-4px;margin-left:4px;margin-bottom:6px;}
}
@media(max-width:640px){
  .kd-shop-widget-section{padding-top:2px !important;}
  .kd-shop-stepper-shell{margin-bottom:0 !important;}
  .kd-shop-stepper-inner{padding:2px 6px 9px !important;}
  #kd-shop-body{padding:3px 0 12px !important;}
  .kd-dot{width:24px !important;height:24px !important;font-size:11px !important;}
  .kd-step-col{flex-basis:24px !important;}
  /* Die Schrittnamen sind hier 9 Pixel gross, stehen absolut unter den Punkten
     und ragen deshalb in die Produktkarten hinein: gemessen am 31.08.2026 auf
     390 Pixeln Breite endeten sie bei 226, die erste Karte begann bei 206. Zu
     lesen waren sie ohnehin nicht, "Produkt" endete bei 140 und
     "Konfiguration" begann bei 141. Die nummerierten Punkte samt Haekchen
     tragen den Fortschritt allein. */
  .kd-step-label{display:none !important;}
  .kd-line{min-width:12px !important;margin:11px 6px 0 !important;}
  #kd-pick-hint{display:none !important;}
}

/* Gutscheinfeld auf allen Breiten eingeklappt (Variante B aus AB-15, seit
   04.10.2026 dauerhaft): es fragt nach etwas, das die meisten nicht haben. */
#kd-coupon-toggle{display:block !important;align-self:flex-start;padding:2px 0;
  background:none;border:none;cursor:pointer;font-family:Lato,sans-serif;
  font-size:14px;color:#006b3e;text-decoration:underline;}
#kd-step-2:not([data-coupon-open]) #kd-rabatt-row{display:none !important;}

/* ══ Mobiler Kaufpfad (bis 900px) ══════════════════════════════════════════
   Gemessen am 31.08.2026 lagen auf 390 mal 844 Pixeln 2.773 Pixel zwischen
   der ersten Produktkarte und dem Bezahlbutton, also 3,3 Bildschirmhoehen.
   Ursache war nicht ein einzelner zu grosser Baustein, sondern die auf eine
   Spalte zusammenfallende Zweispaltenansicht: Konfiguration, Produktinfo,
   Gutschein, Preis und Zahlung stapelten sich hintereinander.

   Vier Eingriffe, alle unterhalb von 900 Pixeln. Oberhalb bleibt der Shop
   unveraendert; die A/B-Tests sind seit 04.10.2026 beendet.
   ══════════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  /* 1. Die Produktinfo erklaert, sie fragt nichts ab: sie gehoert hinter den
        Abschluss, nicht zwischen Eingabe und Bezahlbutton. */
  #kd-right-col{display:flex !important;flex-direction:column !important;}
  #kd-right-col>#kd-detail-panel{order:2;margin-top:18px;}
  #kd-right-col>div:not(#kd-detail-panel){order:1;}

  /* 2. Optionale Angaben hinter einen Umschalter. Zusatzverkaeufe (Zitation,
        Roter-Faden-Check, Style-Sheet) bleiben sichtbar, verborgen wird nur
        reine Dateneingabe. */
  #kd-extra-fields>div{grid-template-columns:1fr !important;}
  #kd-opt-toggle{display:block !important;order:80;grid-column:1/-1;
    margin-top:4px;padding:9px 12px;width:100%;text-align:left;cursor:pointer;
    background:#fff;border:1.5px solid #d8dee5;border-radius:9px;
    font-family:Lato,sans-serif;font-size:14px;font-weight:700;color:#33404d;}
  #kd-opt-toggle::after{content:"+";float:right;font-size:16px;line-height:1.2;color:#6b7280;}
  #kd-step-2[data-opt-open] #kd-opt-toggle::after{content:"\2212";}
  .kd-opt{order:90;}
  #kd-step-2:not([data-opt-open]) .kd-opt{display:none !important;}

  /* 3. Die E-Mail-Zeile nutzt mobil die volle Breite. Das Bestaetigungsfeld ist
        seit dem 31.08.2026 ueberall entfallen, siehe Kommentar am Markup. */
  #kd-email-row{max-width:none !important;}

  /* 4. Vertrauen und Preis gehoeren an den Bezahlbutton, gerade auf dem Handy.
        Bis hierher waren Bewertung und Zahlarten unter 800 Pixeln ganz aus. */
  #kd-tp-badge{display:flex !important;}
  .kd-zahlweisen{display:flex !important;flex-wrap:wrap !important;gap:5px !important;}
  .kd-zahlweisen>img,.kd-zahlweisen>div{width:34px !important;height:22px !important;}

  /* Platz fuer die feste Leiste, damit sie nichts verdeckt. */
  #kd-shop[data-mobile-bar-on]{padding-bottom:76px;}
}

/* Feste Preis- und Aktionsleiste: sie macht die Scrollstrecke unerheblich,
   weil Preis und naechster Schritt immer erreichbar bleiben. Sie erscheint
   erst nach der Produktwahl und weicht, sobald der echte Bezahlbereich im
   Bild ist. z-index 18 ist der globale Vertrauensbanner, 9999 das
   Cookie-Banner: beide behalten Vorrang. */
#kd-mobile-bar{display:none;}
@media(max-width:900px){
  #kd-mobile-bar[data-on]{position:fixed;left:0;right:0;bottom:0;z-index:17;
    display:flex;align-items:center;gap:12px;box-sizing:border-box;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    background:#fff;border-top:1.5px solid #dde3e8;
    box-shadow:0 -4px 18px rgba(20,55,38,.14);
    font-family:Poppins,Lato,sans-serif;}
  #kd-mobile-bar .kdmb-price{display:flex;flex-direction:column;min-width:0;flex:1;}
  #kd-mobile-bar .kdmb-price b{font-size:19px;font-weight:800;color:#006b3e;line-height:1.1;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  #kd-mobile-bar .kdmb-price span{font-size:12px;color:#5b6670;line-height:1.25;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  #kd-mobile-bar button{flex:0 0 auto;max-width:58%;padding:12px 18px;border:none;
    border-radius:10px;font-family:Poppins,sans-serif;font-size:15px;font-weight:700;
    color:#fff;background:linear-gradient(to right,#00c06a,#005430);cursor:pointer;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
}
@media(max-width:360px){
  #kd-mobile-bar[data-on]{gap:8px;padding-left:10px;padding-right:10px;}
  #kd-mobile-bar button{padding:11px 12px;font-size:14px;}
  #kd-mobile-bar .kdmb-price b{font-size:17px;}
}
/* preisrechner: inline */
@media print {
    @page { margin: 10mm 15mm; }
    body * { visibility: hidden !important; }
    #kd-step-success, #kd-step-success * { visibility: visible !important; }
    #kd-step-success { position: absolute; left: 0; top: 0; width: 100%; }
    #kd-print-btn { display: none !important; }
    #kd-print-logo { display: block !important; }
    #kd-success-links { display: none !important; }
    #kd-success-email-hint { display: none !important; }
    #kd-success-invoice { display: none !important; }
    #kd-print-footer { display: block !important; text-align: center; margin-top: 30px; font-size: 13px; color: #888; }
  }
/* preisrechner: 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}