:root {
      --page: #f7f9fc;
      --paper: #ffffff;
      --ink: #102036;
      --muted: #66758a;
      --soft: #eef4fa;
      --line: #dfe8f2;
      --blue: #1557d6;
      --blue-dark: #0f3f9d;
      --green: #14a88f;
      --green-soft: #e8f8f5;
      --shadow: 0 28px 80px rgba(16, 32, 54, .08);
      --max: 1280px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      color: var(--ink);
      background:
        radial-gradient(circle at 8% 0%, rgba(20,168,143,.10), transparent 34rem),
        radial-gradient(circle at 90% 6%, rgba(21,87,214,.10), transparent 36rem),
        var(--page);
      line-height: 1.7;
      overflow-x: hidden;
    }

    body.lightbox-open { overflow: hidden; }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; height: auto; }

    .wrap {
      width: min(var(--max), calc(100% - 56px));
      margin: 0 auto;
    }

    .site-header { padding: 26px 0 12px; }

    .nav {
      min-height: 72px;
      padding: 12px 14px 12px 20px;
      border: 1px solid rgba(223,232,242,.95);
      border-radius: 999px;
      background: rgba(255,255,255,.80);
      backdrop-filter: blur(18px);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 32px;
      box-shadow: 0 14px 48px rgba(16,32,54,.04);
    }

    .brand {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 13px;
      font-weight: 850;
      letter-spacing: -.035em;
      font-size: 1.24rem;
      white-space: nowrap;
    }

    .brand-mark {
      width: 44px;
      height: 44px;
      flex: 0 0 auto;
      border-radius: 16px;
      display: grid;
      place-items: center;
      color: #fff;
      background: linear-gradient(135deg, var(--blue), var(--green));
      font-weight: 900;
      box-shadow: 0 14px 30px rgba(21,87,214,.22);
    }

    .brand-sub {
      color: var(--muted);
      font-weight: 650;
      font-size: .92rem;
      margin-left: 8px;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 28px;
      color: var(--muted);
      font-size: .95rem;
    }

    .button {
      min-height: 50px;
      padding: 0 24px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      border: 1px solid transparent;
      transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
      cursor: pointer;
      font: inherit;
      text-align: center;
      white-space: normal;
    }

    .button:hover { transform: translateY(-1px); }

    .button.primary {
      color: #fff;
      background: var(--blue);
      box-shadow: 0 18px 40px rgba(21,87,214,.22);
    }

    .button.primary:hover { background: var(--blue-dark); }

    .button.ghost {
      background: #fff;
      border-color: var(--line);
      color: var(--ink);
    }

    .hero { padding: 120px 0 170px; }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
      gap: clamp(40px, 4vw, 64px);
      align-items: center;
    }

    .eyebrow {
      display: inline-flex;
      gap: 10px;
      align-items: center;
      padding: 10px 15px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,.84);
      color: var(--muted);
      font-weight: 750;
      font-size: .94rem;
      max-width: 100%;
    }

    .eyebrow-dot {
      width: 9px;
      height: 9px;
      background: var(--green);
      border-radius: 99px;
      flex: 0 0 auto;
    }

    h1 {
      margin: 34px 0 28px;
      font-size: clamp(2.9rem, 3.8vw, 4.15rem);
      line-height: 1.02;
      letter-spacing: -.062em;
      text-wrap: wrap;
      overflow-wrap: normal;
      max-width: 720px;
    }

    .hero-copy { min-width: 0; }

    .hero-text {
      margin: 0;
      font-size: clamp(1.06rem, 1.25vw, 1.18rem);
      line-height: 1.75;
      color: var(--muted);
      max-width: 680px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 15px;
      align-items: center;
    }

    .hero-note {
      margin: 24px 0 0;
      color: var(--muted);
      font-size: .97rem;
    }

    .hero-shot {
      border-radius: 34px;
      border: 1px solid rgba(223,232,242,.95);
      background: #fff;
      box-shadow: var(--shadow);
      overflow: hidden;
      min-width: 0;
    }

    .browser-bar {
      height: 58px;
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 0 22px;
      border-bottom: 1px solid var(--line);
      background: rgba(255,255,255,.88);
      color: var(--muted);
    }

    .browser-bar span {
      width: 11px;
      height: 11px;
      border-radius: 99px;
      background: #cfd8e5;
      flex: 0 0 auto;
    }

    .browser-bar strong {
      margin-left: 10px;
      font-size: .92rem;
      font-weight: 800;
      overflow-wrap: normal;
    }

    .shot-link {
      display: block;
      position: relative;
      cursor: zoom-in;
      background: #fff;
    }

    .shot-link:after {
      content: "Zum Vergrößern anklicken";
      position: absolute;
      right: 18px;
      bottom: 18px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(16, 32, 54, .74);
      color: #fff;
      font-size: .84rem;
      font-weight: 750;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity .18s ease, transform .18s ease;
      pointer-events: none;
    }

    .shot-link:hover:after { opacity: 1; transform: translateY(0); }
    .shot-link img { width: 100%; transition: transform .22s ease; }
    .shot-link:hover img { transform: scale(1.01); }

    .shot-caption {
      padding: 24px 26px 26px;
      border-top: 1px solid var(--line);
      background: #fff;
    }

    .shot-caption strong { display: block; line-height: 1.25; }
    .shot-caption span { display: block; color: var(--muted); font-size: .94rem; margin-top: 5px; }

    section { padding: 148px 0; }

    .section-intro {
      max-width: 820px;
      margin: 0 0 72px;
    }

    .section-intro.center {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }

    .kicker {
      color: var(--blue);
      font-weight: 850;
      letter-spacing: .02em;
      text-transform: uppercase;
      font-size: .82rem;
      margin-bottom: 16px;
    }

    h2 {
      margin: 0;
      font-size: clamp(2.15rem, 3.35vw, 3.7rem);
      line-height: 1.03;
      letter-spacing: -.063em;
      text-wrap: wrap;
    }

    .section-intro p {
      margin: 22px 0 0;
      color: var(--muted);
      font-size: 1.06rem;
      max-width: 760px;
    }

    .section-intro.center p { margin-left: auto; margin-right: auto; }

    .white-section {
      background: #fff;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .pain-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 34px;
    }

    .pain-card,
    .solution-card,
    .process-card {
      background: var(--page);
      border: 1px solid var(--line);
      border-radius: 28px;
      padding: 36px;
      min-width: 0;
    }

    .pain-card strong,
    .solution-card h3,
    .process-card h3 {
      display: block;
      margin: 0 0 10px;
      font-size: 1.12rem;
      line-height: 1.22;
      letter-spacing: -.03em;
    }

    .pain-card p,
    .solution-card p,
    .process-card p {
      margin: 0;
      color: var(--muted);
    }

    .story-box {
      max-width: 1200px;
      margin: 0 auto;
      padding: clamp(34px, 5vw, 58px);
      border-radius: 34px;
      background: linear-gradient(135deg, #10213f, #173f88);
      color: #fff;
      box-shadow: var(--shadow);
      display: grid;
      grid-template-columns: minmax(0, .55fr) minmax(0, 1fr);
      gap: clamp(28px, 5vw, 56px);
      align-items: start;
    }

    .story-number {
      font-size: clamp(4.8rem, 10vw, 8.2rem);
      line-height: .85;
      letter-spacing: -.08em;
      font-weight: 900;
      color: rgba(255,255,255,.96);
    }

    .story-number span {
      display: block;
      margin-top: 12px;
      font-size: 1rem;
      line-height: 1.3;
      letter-spacing: 0;
      font-weight: 750;
      color: rgba(255,255,255,.68);
    }

    .story-copy h2 { color: #fff; }
    .story-copy p {
      margin: 22px 0 0;
      color: rgba(255,255,255,.78);
      font-size: 1.04rem;
    }

    .story-copy strong { color: #fff; }

    .solution-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 32px;
    }

    .solution-card {
      background: rgba(255,255,255,.94);
      box-shadow: 0 18px 54px rgba(16,32,54,.05);
      padding: 40px;
    }

    .solution-card .number {
      display: inline-grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border-radius: 15px;
      background: rgba(21,87,214,.09);
      color: var(--blue);
      font-weight: 900;
      margin-bottom: 18px;
    }

    .solution-card ul {
      margin: 18px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 9px;
    }

    .solution-card li {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 9px;
      color: var(--muted);
    }

    .solution-card li:before {
      content: "✓";
      color: var(--green);
      font-weight: 900;
    }

    .feature-grid { display: grid; gap: 80px; }

    .feature {
      display: grid;
      grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
      gap: clamp(44px, 5vw, 76px);
      align-items: center;
      padding: clamp(34px, 4vw, 52px);
      border: 1px solid var(--line);
      border-radius: 36px;
      background: rgba(255,255,255,.74);
      box-shadow: 0 20px 60px rgba(16,32,54,.045);
      min-width: 0;
    }

    .feature.reverse { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
    .feature.reverse .feature-copy { order: 2; }
    .feature.reverse .image-card { order: 1; }

    .feature-copy h3 {
      margin: 0;
      font-size: clamp(1.8rem, 2.5vw, 2.75rem);
      line-height: 1.06;
      letter-spacing: -.055em;
      text-wrap: wrap;
    }

    .feature-copy p { margin: 20px 0 0; color: var(--muted); font-size: 1.08rem; }

    .feature-list {
      margin: 22px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 10px;
    }

    .feature-list li {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 10px;
      color: var(--muted);
    }

    .feature-list li:before { content: "✓"; color: var(--green); font-weight: 900; }

    .image-card {
      border-radius: 32px;
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      overflow: hidden;
      min-width: 0;
      margin: 0;
    }

    .image-card figcaption {
      padding: 18px 22px;
      color: var(--muted);
      font-size: .94rem;
      border-top: 1px solid var(--line);
      background: #fff;
    }

    .process-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 30px;
      position: relative;
    }

    .process-card { background: #fff; padding: 34px; }

    .process-step {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: var(--green-soft);
      color: #087463;
      font-weight: 900;
      margin-bottom: 18px;
    }

    .cta { padding: 0 0 120px; }

    .cta-box {
      border-radius: 46px;
      padding: clamp(36px, 5vw, 66px);
      background:
        radial-gradient(circle at 80% 10%, rgba(20,168,143,.30), transparent 28rem),
        linear-gradient(135deg, #101f38, #1557d6);
      color: #fff;
      display: grid;
      grid-template-columns: minmax(0, .95fr) minmax(320px, 520px);
      gap: clamp(36px, 5vw, 70px);
      align-items: start;
      box-shadow: var(--shadow);
    }

    .cta-box h2 { color: #fff; }
    .cta-box p { color: rgba(255,255,255,.78); font-size: 1.12rem; margin: 24px 0 0; }

    .cta-points {
      margin: 24px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 10px;
    }

    .cta-points li {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 10px;
      color: rgba(255,255,255,.82);
    }

    .cta-points li:before { content: "✓"; color: #78e3ce; font-weight: 900; }

    .lead-form {
      display: grid;
      gap: 30px;
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.20);
      border-radius: 32px;
      padding: clamp(26px, 3vw, 34px);
      min-width: 0;
    }

    .form-title { display: block; font-size: 1.24rem; line-height: 1.2; }
    .form-help { margin: -4px 0 0 !important; font-size: .96rem !important; }

    .form-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .lead-form label {
      min-width: 0;
      display: grid;
      gap: 8px;
      color: rgba(255,255,255,.90);
      font-weight: 760;
      font-size: .94rem;
    }

    .lead-form input,
    .lead-form textarea {
      width: 100%;
      min-width: 0;
      border: 1px solid rgba(255,255,255,.28);
      border-radius: 18px;
      background: rgba(255,255,255,.12);
      color: #fff;
      padding: 14px 15px;
      font: inherit;
      outline: none;
    }

    .lead-form textarea { resize: vertical; min-height: 130px; }
    .lead-form input::placeholder,
    .lead-form textarea::placeholder { color: rgba(255,255,255,.58); }
    .lead-form input:focus,
    .lead-form textarea:focus { border-color: rgba(255,255,255,.72); }

    .privacy-check {
      grid-template-columns: auto minmax(0, 1fr) !important;
      align-items: start;
      font-weight: 500 !important;
      font-size: .88rem !important;
      color: rgba(255,255,255,.80) !important;
    }

    .privacy-check input { width: auto; margin-top: 5px; }
    .privacy-check a { text-decoration: underline; }
    .honeypot { display: none; }
    .lead-form .button { background: #fff; color: #10213f; width: 100%; }

    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 36px;
      background: rgba(5, 12, 24, .82);
      backdrop-filter: blur(10px);
    }

    .lightbox.show { display: flex; }

    .lightbox-inner {
      width: min(1500px, 100%);
      max-height: calc(100vh - 56px);
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      border-radius: 28px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 40px 120px rgba(0,0,0,.38);
    }

    .lightbox-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 30px;
      padding: 16px 18px 16px 22px;
      border-bottom: 1px solid var(--line);
      background: #fff;
    }

    .lightbox-title { min-width: 0; font-weight: 850; color: var(--ink); overflow-wrap: normal; }

    .lightbox-close {
      width: 42px;
      height: 42px;
      border: 0;
      border-radius: 999px;
      background: var(--soft);
      color: var(--ink);
      font-size: 1.5rem;
      line-height: 1;
      cursor: pointer;
      flex: 0 0 auto;
    }

    .lightbox-body { overflow: auto; background: #f3f6fa; }
    .lightbox-body img { width: 100%; height: auto; max-width: none; }

    .form-result { text-align: center; padding: clamp(34px, 5vw, 56px); }

    .form-result-icon {
      width: 76px;
      height: 76px;
      margin: 0 auto 22px;
      border-radius: 26px;
      display: grid;
      place-items: center;
      color: #fff;
      font-size: 2.1rem;
      font-weight: 900;
      background: linear-gradient(135deg, var(--blue), var(--green));
      box-shadow: 0 20px 44px rgba(21,87,214,.22);
    }

    .form-result-icon.error { background: linear-gradient(135deg, #d93838, #ff8a65); }
    .form-result h3 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.08; letter-spacing: -.055em; color: var(--ink); }
    .form-result p { max-width: 720px; margin: 18px auto 0; color: var(--muted); font-size: 1.05rem; }
    .form-result-actions { margin-top: 15px; display: flex; justify-content: center; }

    .cookie-consent {
      position: fixed;
      left: 18px;
      right: 18px;
      bottom: 18px;
      z-index: 9999;
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      max-width: 980px;
      margin: 0 auto;
      padding: 18px;
      border-radius: 22px;
      background: rgba(255,255,255,.96);
      border: 1px solid rgba(15,32,57,.14);
      box-shadow: 0 26px 80px rgba(15,32,57,.22);
      backdrop-filter: blur(18px);
    }

    .cookie-consent.show { display: flex; }
    .cookie-consent p { margin: 0; color: #30415a; line-height: 1.45; font-size: .94rem; }
    .cookie-consent strong { color: var(--ink); }
    .cookie-consent-actions { display: flex; gap: 10px; flex-shrink: 0; }
    .cookie-consent .button { white-space: nowrap; padding: 11px 15px; font-size: .9rem; }

    footer {
      border-top: 1px solid var(--line);
      padding: 38px 0;
      color: var(--muted);
      font-size: .95rem;
      background: rgba(255,255,255,.54);
    }

    .footer-row { display: flex; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
    .footer-row span:last-child { display: flex; gap: 20px; flex-wrap: wrap; }




    .faq-grid {
      max-width: 980px;
      margin: 0 auto;
      display: grid;
      gap: 14px;
    }

    .faq-item {
      border: 1px solid var(--line);
      border-radius: 20px;
      background: #fff;
      padding: 0 22px;
      box-shadow: 0 10px 30px rgba(16,32,54,.035);
    }

    .faq-item summary {
      cursor: pointer;
      list-style: none;
      font-weight: 820;
      line-height: 1.35;
      padding: 20px 34px 20px 0;
      position: relative;
    }

    .faq-item summary::-webkit-details-marker { display: none; }

    .faq-item summary:after {
      content: "+";
      position: absolute;
      right: 0;
      top: 16px;
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border-radius: 10px;
      background: var(--soft);
      color: var(--blue);
      font-size: 1.2rem;
      font-weight: 900;
    }

    .faq-item[open] summary:after { content: "−"; }

    .faq-item p {
      margin: 0;
      padding: 0 38px 20px 0;
      color: var(--muted);
    }

    /* Büro-Check / Lead-Magnet */
    .check-section {
      background:
        radial-gradient(circle at 12% 0%, rgba(20,168,143,.09), transparent 30rem),
        radial-gradient(circle at 88% 100%, rgba(21,87,214,.07), transparent 34rem),
        #fff;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .check-shell {
      max-width: 1080px;
      margin: 0 auto;
      border: 1px solid var(--line);
      border-radius: 38px;
      background: rgba(255,255,255,.96);
      box-shadow: 0 28px 80px rgba(16,32,54,.07);
      overflow: hidden;
    }

    .check-head {
      padding: clamp(34px,5vw,58px);
      display: grid;
      grid-template-columns: minmax(0,1.15fr) minmax(260px,.85fr);
      gap: 42px;
      align-items: end;
      border-bottom: 1px solid var(--line);
      background: linear-gradient(135deg, #fbfefd, #f5f9ff);
    }

    .check-head h2 { margin-top: 8px; }
    .check-head p {
      margin: 18px 0 0;
      color: var(--muted);
      font-size: 1.04rem;
      max-width: 680px;
    }

    .check-benefits {
      display: grid;
      gap: 12px;
    }

    .check-benefit {
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 12px;
      align-items: start;
      color: var(--muted);
      font-size: .95rem;
    }

    .check-benefit span {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      background: var(--green-soft);
      color: #087463;
      font-weight: 900;
    }

    .check-body { padding: clamp(30px,5vw,56px); }

    .check-progress {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 16px;
      align-items: center;
      margin-bottom: 30px;
    }

    .check-progress-track {
      height: 9px;
      border-radius: 99px;
      background: var(--soft);
      overflow: hidden;
    }

    .check-progress-bar {
      width: 12.5%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg,var(--green),var(--blue));
      transition: width .25s ease;
    }

    .check-progress-label {
      color: var(--muted);
      font-size: .9rem;
      white-space: nowrap;
    }

    .check-step { display: none; }
    .check-step.active { display: block; }

    .check-step h3 {
      margin: 0;
      font-size: clamp(1.55rem,2.4vw,2.35rem);
      line-height: 1.08;
      letter-spacing: -.045em;
      max-width: 780px;
    }

    .check-step > p {
      margin: 12px 0 0;
      color: var(--muted);
    }

    .check-options {
      margin-top: 28px;
      display: grid;
      grid-template-columns: repeat(2,minmax(0,1fr));
      gap: 14px;
    }

    .check-option {
      position: relative;
      display: flex;
      align-items: center;
      gap: 14px;
      min-height: 72px;
      padding: 16px 18px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      cursor: pointer;
      transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
      color: var(--ink);
      font-weight: 720;
      line-height: 1.35;
    }

    .check-option:hover {
      transform: translateY(-1px);
      border-color: #b8c9dc;
      box-shadow: 0 12px 28px rgba(16,32,54,.06);
    }

    .check-option input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .check-option-dot {
      width: 24px;
      height: 24px;
      flex: 0 0 auto;
      border: 2px solid #c6d2df;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #fff;
    }

    .check-option input:checked + .check-option-dot {
      border-color: var(--green);
      background: var(--green);
      box-shadow: inset 0 0 0 5px #fff;
    }

    .check-option:has(input:checked) {
      border-color: rgba(20,168,143,.65);
      background: #f7fdfb;
      box-shadow: 0 14px 34px rgba(20,168,143,.08);
    }

    .check-nav {
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: center;
      flex-wrap: wrap;
    }

    .check-nav .button { min-width: 150px; }
    .check-hint { color: var(--muted); font-size: .88rem; }

    .check-result {
      display: none;
      grid-template-columns: minmax(0,1fr) minmax(320px,.78fr);
      gap: 42px;
      align-items: start;
    }

    .check-result.show { display: grid; }

    .score-badge {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      border-radius: 999px;
      background: var(--green-soft);
      color: #087463;
      font-weight: 850;
      font-size: .92rem;
    }

    .score-title {
      margin: 20px 0 0;
      font-size: clamp(2rem,3vw,3.2rem);
      line-height: 1.03;
      letter-spacing: -.055em;
    }

    .score-copy {
      margin: 18px 0 0;
      color: var(--muted);
      font-size: 1.03rem;
      max-width: 680px;
    }

    .score-areas {
      margin-top: 28px;
      display: grid;
      gap: 12px;
    }

    .score-area {
      padding: 16px 18px;
      border-radius: 18px;
      background: var(--page);
      border: 1px solid var(--line);
      display: grid;
      grid-template-columns: 34px 1fr auto;
      gap: 12px;
      align-items: center;
    }

    .score-area-icon {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      font-weight: 900;
      background: var(--soft);
    }

    .score-area strong { display: block; line-height: 1.25; }
    .score-area small { color: var(--muted); }
    .score-area em {
      font-style: normal;
      font-size: .78rem;
      font-weight: 850;
      border-radius: 999px;
      padding: 6px 9px;
      white-space: nowrap;
    }

    .score-area.high em { background: #ffe9ed; color: #c62d4e; }
    .score-area.medium em { background: #fff4df; color: #9b6512; }
    .score-area.low em { background: var(--green-soft); color: #087463; }

    .lead-result-card {
      border-radius: 26px;
      background: linear-gradient(145deg,#10213f,#154b9f);
      color: #fff;
      padding: 28px;
      box-shadow: var(--shadow);
    }

    .lead-result-card h3 {
      margin: 0;
      font-size: 1.55rem;
      line-height: 1.1;
      letter-spacing: -.04em;
    }

    .lead-result-card p {
      margin: 12px 0 0;
      color: rgba(255,255,255,.75);
      line-height: 1.6;
    }

    .check-lead-form {
      margin-top: 22px;
      display: grid;
      gap: 14px;
    }

    .check-lead-form label {
      display: grid;
      gap: 7px;
      color: rgba(255,255,255,.92);
      font-size: .9rem;
      font-weight: 760;
    }

    .check-lead-form input[type="text"],
    .check-lead-form input[type="email"] {
      width: 100%;
      padding: 13px 14px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.24);
      background: rgba(255,255,255,.10);
      color: #fff;
      font: inherit;
      outline: none;
    }

    .check-lead-form input::placeholder { color: rgba(255,255,255,.55); }

    .check-consent {
      display: grid !important;
      grid-template-columns: auto minmax(0,1fr) !important;
      align-items: start;
      gap: 9px !important;
      font-weight: 500 !important;
      font-size: .82rem !important;
      line-height: 1.45;
      color: rgba(255,255,255,.76) !important;
    }

    .check-consent input { margin-top: 4px; }
    .check-consent a { text-decoration: underline; }

    .marketing-consent {
      padding: 12px 13px;
      border-radius: 14px;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.10);
    }

    .check-submit {
      width: 100%;
      background: #fff !important;
      color: #10213f !important;
    }

    .check-success {
      display: none;
      margin-top: 18px;
      padding: 14px;
      border-radius: 14px;
      background: rgba(120,227,206,.12);
      border: 1px solid rgba(120,227,206,.30);
      color: #d7fff6;
      font-size: .9rem;
    }

    .check-success.show { display: block; }

    .check-secondary-cta {
      margin-top: 24px;
      color: var(--muted);
      font-size: .92rem;
    }

    @media (max-width: 900px) {
      .check-head,
      .check-result { grid-template-columns: 1fr; }
      .check-options { grid-template-columns: 1fr; }
    }

    @media (max-width: 680px) {
      .check-shell { border-radius: 26px; }
      .check-head, .check-body { padding: 26px; }
      .check-nav { align-items: stretch; }
      .check-nav .button { width: 100%; }
      .score-area { grid-template-columns: 34px 1fr; }
      .score-area em { grid-column: 2; justify-self: start; }
    }

    /* Digitaler Büroassistent */
    .assistant-preview { overflow: hidden; }
    .assistant-demo { padding: 28px; display: grid; gap: 16px; background: #fbfcfe; }
    .assistant-demo-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
    .assistant-demo-head strong { display:block; font-size:1.45rem; line-height:1.15; }
    .assistant-demo-head span { display:block; color:var(--muted); font-size:.92rem; margin-top:4px; }
    .assistant-demo-head small { color:var(--muted); white-space:nowrap; }
    .assistant-summary { color:var(--muted); font-size:.96rem; padding-bottom:2px; }

    .assistant-item {
      display:grid;
      grid-template-columns: 42px minmax(0,1fr);
      gap:14px;
      padding:18px;
      border:1px solid var(--line);
      border-radius:20px;
      background:#fff;
    }
    .assistant-item.danger { border-left:4px solid #ff416c; }
    .assistant-item.warning { border-left:4px solid #f0a43a; }
    .assistant-icon {
      width:38px; height:38px; border-radius:14px; display:grid; place-items:center;
      font-weight:900; color:var(--ink); background:var(--soft);
    }
    .assistant-item strong { display:block; line-height:1.3; }
    .assistant-item p { margin:5px 0 8px; color:var(--muted); font-size:.91rem; }
    .assistant-item b { display:block; font-size:.93rem; }
    .assistant-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
    .assistant-actions span,
    .mini-action {
      display:inline-flex; align-items:center; min-height:36px; padding:0 13px; border-radius:10px;
      background:var(--green); color:#fff; font-size:.82rem; font-weight:800;
    }
    .assistant-actions span.light { background:var(--soft); color:var(--ink); }
    .assistant-good {
      padding:12px 14px; border-radius:14px; background:var(--green-soft); color:#087463;
      font-size:.9rem; font-weight:800;
    }

    .assistant-scenarios .solution-card { min-height: 300px; display:flex; flex-direction:column; }
    .assistant-question { color:var(--ink) !important; font-weight:800; margin-top:auto !important; padding-top:22px; }
    .mini-action { margin-top:14px; width:max-content; }

    .learning-box {
      margin-top:48px;
      padding:42px;
      border-radius:32px;
      border:1px solid #cfe9e2;
      background:linear-gradient(135deg,#f4fcfa,#ffffff);
      display:grid;
      grid-template-columns:auto minmax(0,1.2fr) minmax(260px,.8fr);
      gap:28px;
      align-items:center;
    }
    .learning-icon {
      width:64px; height:64px; display:grid; place-items:center; border-radius:22px;
      background:var(--green-soft); color:#087463; font-size:2rem; font-weight:900;
    }
    .learning-box h3 { margin:0; font-size:1.8rem; letter-spacing:-.04em; }
    .learning-box p { color:var(--muted); margin:12px 0 0; }
    .learning-example {
      background:#fff; border:1px solid var(--line); border-radius:22px; padding:22px;
      box-shadow:0 16px 40px rgba(16,32,54,.05);
    }
    .learning-example strong, .learning-example span { display:block; }
    .learning-example span { color:var(--muted); margin-top:8px; }
    .learning-example b { display:inline-block; margin-top:14px; padding:8px 12px; border-radius:10px; background:var(--green); color:#fff; }

    .core-grid {
      display:grid;
      grid-template-columns:repeat(7,minmax(0,1fr));
      gap:24px;
      align-items:start;
    }
    .core-item { text-align:center; min-width:0; }
    .core-item span {
      width:48px; height:48px; margin:0 auto 14px; display:grid; place-items:center;
      border-radius:16px; background:var(--green-soft); color:#087463; font-weight:900; font-size:1.2rem;
    }
    .core-item strong { display:block; line-height:1.25; }
    .core-item p { color:var(--muted); font-size:.9rem; line-height:1.5; margin:8px 0 0; }
    .module-note {
      margin-top:42px; text-align:center; padding:16px 20px; border-radius:16px;
      background:var(--soft); color:var(--muted);
    }


    @media (max-width: 1080px) {
      .hero-grid,
      .story-box,
      .feature,
      .feature.reverse,
      .cta-box {
        grid-template-columns: 1fr;
      }

      .feature.reverse .feature-copy,
      .feature.reverse .image-card { order: initial; }

      .pain-grid,
      .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .core-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .learning-box { grid-template-columns: auto 1fr; }
      .learning-example { grid-column: 1 / -1; }
    }

    @media (max-width: 900px) {
      .nav-links { display: none; }
      .hero { padding: 88px 0 110px; }
      .solution-grid { grid-template-columns: 1fr; }
      .core-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      section { padding: 104px 0; }
    }

    @media (max-width: 680px) {
      .wrap { width: min(var(--max), calc(100% - 30px)); }
      .site-header { padding-top: 18px; }
      .nav { border-radius: 28px; }
      .brand-sub { display: none; }

      h1 { font-size: clamp(2.05rem, 8.8vw, 2.9rem); line-height: 1.04; letter-spacing: -.052em; }
      h2 { font-size: clamp(1.95rem, 8.5vw, 2.75rem); letter-spacing: -.05em; }

      .hero-grid { gap: 58px; }
      .hero-copy { text-align: left; }
      .eyebrow { font-size: .84rem; padding: 9px 12px; }
      .hero-text { font-size: 1.02rem; line-height: 1.72; }
      .hero-actions { flex-direction: column; align-items: stretch; margin-top: 32px; }
      .button { width: 100%; }
      .pain-grid,
      .process-grid,
      .form-row,
      .core-grid { grid-template-columns: 1fr; }
      .learning-box { grid-template-columns: 1fr; padding:28px; }
      .learning-icon { width:54px; height:54px; }
      .assistant-demo { padding:20px; }

      .hero-shot,
      .pain-card,
      .solution-card,
      .process-card,
      .story-box,
      .cta-box,
      .image-card { border-radius: 26px; }

      .lead-form { padding: 24px; border-radius: 24px; }
      .cookie-consent { align-items: stretch; flex-direction: column; }
      .cookie-consent-actions { width: 100%; }
      .cookie-consent-actions .button { width: 100%; }
      .shot-caption { padding: 20px; }
      .shot-caption span { line-height: 1.6; }
      .browser-bar { height: 52px; padding: 0 16px; }
      .browser-bar strong { font-size: .82rem; }
      .hero-note { font-size: .9rem; line-height: 1.55; }
      .feature { padding: 28px; gap: 34px; }
      .feature-grid { gap: 52px; }
      .section-intro { margin-bottom: 50px; }
      section { padding: 84px 0; }
      .cta { padding-bottom: 96px; }
    }