{{-- KARC-Designsystem: editorial "Engineering-Print". Ein einzelner Akzent
     (var(--primary) aus der Registry), Space-Grotesk-Display, kein KI-Gradient. --}}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
<style>
  :where(.k-wrap,.k-section){
    --k-ink:#17181c; --k-ink2:#44474f; --k-muted:#878c96;
    --k-paper:#faf8f3; --k-line:#e7e2d8;
    --k-acc:var(--primary,#b45309);
    --k-acc-soft:color-mix(in srgb, var(--primary,#b45309) 12%, transparent);
  }
  html{scroll-behavior:smooth}
  .k-wrap{max-width:1080px;margin:0 auto;padding:0 1.5rem}
  .k-disp{font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif}

  /* Hero — linksbündig, schwer, ohne Gradient */
  .k-hero{padding:clamp(3rem,7vw,5.5rem) 0 2.2rem;max-width:900px}
  .k-hero h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(2.5rem,6.2vw,4.6rem);
    line-height:1.02;letter-spacing:-.03em;font-weight:700;color:var(--k-ink);
    margin:1rem 0 1.2rem;text-wrap:balance}
  /* Highlight folgt dem Zeilenumbruch (clone) statt absolutem ::after + nowrap —
     verhindert auf schmalen Screens abgeschnittene Überschriften. */
  .k-grad{color:var(--k-acc);padding:0 .04em;border-radius:2px;
    background:linear-gradient(to top, var(--k-acc-soft) .34em, transparent .34em) no-repeat;
    -webkit-box-decoration-break:clone;box-decoration-break:clone}
  .k-lead{font-size:clamp(1.08rem,2vw,1.3rem);line-height:1.62;color:var(--k-ink2);max-width:60ch}

  .k-eyebrow{display:inline-flex;align-items:center;gap:.65rem;font-family:'Space Grotesk',sans-serif;
    font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--k-acc)}
  .k-eyebrow::before{content:"";width:26px;height:2px;background:var(--k-acc);display:inline-block}
  .k-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .8rem;border:1px solid var(--k-line);
    border-radius:6px;background:var(--k-paper);color:var(--k-ink2);font-weight:600;font-size:.8rem;
    font-family:'Space Grotesk',sans-serif}

  .k-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}
  .k-btn,.k-btn-ghost{display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.5rem;border-radius:9px;
    font-weight:600;font-size:.98rem;text-decoration:none;cursor:pointer;border:1px solid transparent;
    font-family:'Space Grotesk',sans-serif;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,background .18s,border-color .18s,color .18s}
  .k-btn{background:var(--k-ink);color:#fff}
  .k-btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -12px color-mix(in srgb,var(--k-ink) 65%,transparent)}
  .k-btn:active{transform:translateY(0) scale(.99)}
  .k-btn-ghost{background:transparent;color:var(--k-ink);border-color:var(--k-line)}
  .k-btn-ghost:hover{border-color:var(--k-acc);color:var(--k-acc)}
  .k-btn:focus-visible,.k-btn-ghost:focus-visible{outline:2px solid var(--k-acc);outline-offset:2px}
  .k-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

  .k-section{padding:clamp(2.6rem,6vw,4.6rem) 0;border-top:1px solid var(--k-line)}
  .k-section:first-of-type{border-top:0}
  .k-h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:700;
    letter-spacing:-.02em;color:var(--k-ink);margin:.55rem 0 1.2rem;text-wrap:balance}
  .k-p{color:var(--k-ink2);font-size:1.04rem;line-height:1.7;max-width:64ch}

  /* Hairline-Raster statt schwebender Karten */
  .k-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:1px;
    background:var(--k-line);border:1px solid var(--k-line);border-radius:14px;overflow:hidden;margin-top:1.4rem}
  .k-card{display:flex;flex-direction:column;gap:.5rem;padding:1.7rem;background:#fff;transition:background .18s}
  .k-card:hover{background:var(--k-paper)}
  .k-card .ic{width:32px;height:32px;display:grid;place-items:center;color:var(--k-acc);font-size:1.05rem;margin-bottom:.3rem}
  .k-card h3{font-family:'Space Grotesk',sans-serif;margin:0;font-size:1.08rem;font-weight:600;color:var(--k-ink)}
  .k-card p{margin:0;color:var(--k-muted);font-size:.96rem;line-height:1.6}
  .k-card .k-btn,.k-card .k-btn-ghost{margin-top:auto;align-self:flex-start}

  /* Stats — editorial, tabellarische Ziffern */
  .k-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2rem;margin-top:.5rem}
  .k-stat{font-family:'Space Grotesk',sans-serif;font-size:clamp(2.2rem,5vw,3.1rem);font-weight:700;
    letter-spacing:-.02em;color:var(--k-ink);line-height:1;font-variant-numeric:tabular-nums}
  .k-stat-l{color:var(--k-muted);font-size:.9rem;margin-top:.55rem;max-width:24ch;line-height:1.45}

  /* Tabelle — booktabs-Stil */
  .k-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:.96rem;margin-top:.5rem}
  .k-table th,.k-table td{padding:.7rem .9rem;text-align:left}
  .k-table thead th{font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--k-ink);border-bottom:2px solid var(--k-ink)}
  .k-table tbody td{border-bottom:1px solid var(--k-line);color:var(--k-ink2)}
  .k-table tbody tr:last-child td{border-bottom:2px solid var(--k-ink)}
  .k-win{color:#15803d;font-weight:700}.k-lose{color:#b91c1c;font-weight:600}
  .k-note{font-size:.85rem;color:var(--k-muted);margin-top:.8rem;max-width:62ch;line-height:1.55}

  /* Demo */
  .k-drop{display:block;margin-top:1rem;border:1.5px dashed color-mix(in srgb,var(--k-acc) 50%,var(--k-line));border-radius:12px;
    padding:2.4rem 1.5rem;text-align:center;cursor:pointer;transition:.18s;background:var(--k-paper);color:var(--k-ink2)}
  .k-drop:hover,.k-drop.drag{background:var(--k-acc-soft);border-color:var(--k-acc)}
  .k-cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;margin-top:1.4rem;
    background:var(--k-line);border:1px solid var(--k-line);border-radius:12px;overflow:hidden}
  .k-cmp figure{margin:0;background:#fff}
  .k-cmp img{width:100%;display:block;background:var(--k-paper)}
  .k-cmp figcaption{padding:.8rem .9rem}
  .k-cmp .name{font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--k-ink);
    display:flex;justify-content:space-between;align-items:center;gap:.5rem}
  .k-cmp .m{font-size:.82rem;color:var(--k-muted);margin-top:.35rem;display:flex;gap:.85rem;flex-wrap:wrap;font-variant-numeric:tabular-nums}
  .k-pill{font-size:.66rem;font-weight:700;padding:.12rem .45rem;border-radius:4px;background:var(--k-acc-soft);
    color:var(--k-acc);font-family:'Space Grotesk',sans-serif}
  .k-pill.best{background:#dcfce7;color:#15803d}
  .k-levels{display:flex;gap:.4rem;flex-wrap:wrap;margin:1rem 0}
  .k-levels input{position:absolute;opacity:0;width:0;height:0}
  .k-levels label{padding:.5rem 1rem;border:1px solid var(--k-line);border-radius:8px;cursor:pointer;
    font-weight:600;color:var(--k-ink2);font-size:.92rem;transition:.15s;font-family:'Space Grotesk',sans-serif}
  .k-levels input:checked+label{background:var(--k-ink);color:#fff;border-color:var(--k-ink)}
  .k-levels input:focus-visible+label{outline:2px solid var(--k-acc);outline-offset:2px}
  .k-spin{display:inline-block;width:16px;height:16px;border:2.5px solid currentColor;border-top-color:transparent;
    border-radius:50%;animation:kspin .8s linear infinite;vertical-align:-3px}
  @keyframes kspin{to{transform:rotate(360deg)}}
  .k-err{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:9px;padding:.7rem 1rem;margin-top:1rem;display:none}

  @media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
</style>