/* gutscheinshop page */
:root {
    --accent: var(--brand-blue-light);
    --accent-light: var(--brand-blue-lighter);
    --accent-solid: var(--brand-blue);
    --accent-soft: var(--brand-blue-soft);
    --campaign-gold: #F0D39D;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
  body {
    background: var(--bg); color: var(--ink);
    font-family: var(--body);
    font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; }
  img { max-width: 100%; display: block; }
  .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
  .dark :focus-visible { outline-color: #8790FF; }

  h1, h2, h3 { font-family: var(--display); font-stretch: 125%; font-weight: 800; letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; }

  /* Header */
  header { padding: 24px 0; }
  header .wrap { display: flex; align-items: center; gap: 16px; }
  .brand { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 18px; letter-spacing: -.02em; text-decoration: none; }

  /* Buttons */
  .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
    font-family: var(--body); font-weight: 500; font-size: 15px; line-height: 1;
    padding: 13px 18px; border-radius: 3px; border: 0; cursor: pointer; transition: filter .15s ease, color .15s ease, border-color .15s ease;
  }
  .btn-primary { background: var(--accent-solid); color: #fff; }
  .btn-primary:hover { filter: brightness(1.08); }
  .btn-ghost { color: var(--accent); background: transparent; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); }
  .btn-ghost:hover { border-color: var(--accent); }
  .security-note {
    display: inline-flex; align-items: center; gap: 11px; margin-top: 20px;
    color: var(--muted); text-decoration: none; font: 400 12px/1.45 var(--mono);
  }
  .security-note:hover strong { color: var(--accent-light); }
  .security-icon {
    width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center;
    color: var(--accent-light); background: var(--accent-soft); border-radius: 3px;
  }
  .security-icon svg { width: 19px; height: 19px; }
  .security-note strong { display: block; color: var(--ink); font-weight: 500; transition: color .15s ease; }

  /* Hero */
  .hero { padding: 48px 0 88px; }
  .hero .wrap { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 56px; align-items: center; }
  .eyebrow {
    display: inline-flex; align-items: center; width: fit-content; margin-bottom: 20px;
    padding: 7px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-light);
    font: 500 12px/1 var(--mono); letter-spacing: .04em;
  }
  .hero h1 { font-size: clamp(32px, 4.6vw, 52px); margin-bottom: 24px; }
  .hero h1 .soft { color: var(--accent); }
  .lead { font-size: 19px; color: var(--muted); max-width: 560px; margin-bottom: 32px; }

  /* A4 voucher preview */
  .a4-wrap { display: flex; justify-content: center; }
  .a4 {
    width: 100%; max-width: 320px; aspect-ratio: 210 / 297; border-radius: 4px; position: relative; overflow: hidden;
    background: #fff;
    box-shadow: 0 30px 60px rgba(40, 30, 120, .22); transform: rotate(-2.5deg);
  }
  .a4 img { display: block; width: 100%; height: 100%; object-fit: cover; }

  /* Benefits band */
  .band { padding: 48px 0; }
  .band-note { display: block; margin-top: 9px; font: 400 12px/1.45 var(--mono); }

  /* Current client projects */
  .client-projects { padding: 34px 0; background: var(--bg); border-top: 1px solid var(--line); }
  .client-projects .wrap { display: grid; grid-template-columns: minmax(180px, .65fr) 1.35fr; gap: 36px; align-items: center; }
  .client-projects-label { color: var(--muted); font: 500 14px/1.4 var(--body); }
  .client-projects-list { display: flex; flex-wrap: wrap; gap: 10px; }
  .client-projects-list .btn { white-space: nowrap; }

  /* Sections */
  section { padding: 80px 0; border-top: 1px solid var(--line); }
  .band + section { border-top: 0; }
  .section-head { max-width: 660px; margin-bottom: 44px; }
  .section-head h2 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 14px; }
  .section-head p { color: var(--muted); }

  .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .card { background: var(--surface); border-radius: var(--radius); padding: 28px; }
  .card h3 { font-size: 19px; margin-bottom: 10px; }
  .card p { color: var(--muted); font-size: 16px; }

  /* Evidence cards */
  .stat-card { border-top: 3px solid var(--accent); }
  .stat-card .stat-num { color: var(--accent); font-size: clamp(42px, 5vw, 58px); line-height: .95; font-stretch: 125%; font-weight: 700; letter-spacing: -.025em; margin-bottom: 18px; }
  .evidence-note { max-width: 900px; margin-top: 18px; color: var(--muted); font-size: 12px; line-height: 1.55; }
  .evidence-note a { color: var(--accent); text-underline-offset: 2px; }

  /* Interactive product preview */
  .purchase-demo { margin-bottom: 40px; }
  .purchase-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
  .purchase-tab {
    appearance: none; min-width: 0; padding: 13px 14px; text-align: left; cursor: pointer;
    border: 1px solid var(--line); border-radius: 3px; background: transparent; color: var(--muted);
    font: 500 13px/1.35 var(--body); transition: color .15s ease, border-color .15s ease, background .15s ease;
  }
  .purchase-tab span { display: block; margin-bottom: 4px; color: var(--accent-light); font: 500 11px/1 var(--mono); }
  .purchase-tab strong { display: block; color: var(--ink); font-size: 14px; font-weight: 600; }
  .purchase-tab small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.35; }
  .purchase-tab:hover { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
  .purchase-tab[aria-selected="true"] { color: var(--ink); border-color: var(--accent); background: var(--accent-soft); }
  .browser-frame { overflow: hidden; border: 1px solid #343A36; border-radius: 6px; background: #F5F2EC; box-shadow: 0 28px 70px rgba(0,0,0,.22); }
  .browser-bar { height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #202321; }
  .browser-dot { width: 8px; height: 8px; border-radius: 50%; background: #59605B; }
  .browser-address { width: min(52%, 420px); margin-left: 9px; padding: 5px 12px; border-radius: 3px; background: #2C302D; color: #AAB1AC; font: 400 10px/1 var(--mono); }
  .purchase-stage { height: 540px; background: #F5F2EC; color: #20231F; }
  .purchase-panel { height: 100%; display: grid; grid-template-columns: 190px 1fr; }
  .purchase-panel[hidden] { display: none; }
  .demo-sidebar { padding: 28px 22px; background: #17201C; color: #F5F3EE; }
  .demo-logo { margin-bottom: 42px; font: 800 21px/1 var(--display); font-stretch: 125%; letter-spacing: -.03em; }
  .demo-side-step { display: flex; gap: 10px; align-items: center; margin: 15px 0; color: #7F8983; font-size: 12px; }
  .demo-side-step::before { content: ""; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #3E4742; }
  .demo-side-step.active { color: #F5F3EE; }
  .demo-side-step.active::before { background: #8A9AFF; box-shadow: 0 0 0 5px rgba(88,100,255,.22); }
  .demo-content { overflow: hidden; padding: 34px clamp(28px, 4.5vw, 62px); background: #F5F2EC; }
  .demo-kicker { margin-bottom: 7px; color: #68726C; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
  .demo-content h3 { margin-bottom: 8px; color: #161916; font-size: clamp(25px, 3vw, 38px); }
  .demo-copy { max-width: 530px; color: #6C756F; font-size: 14px; line-height: 1.5; }
  .demo-motifs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-top: 22px; max-width: 630px; }
  .demo-motif { padding: 8px; border: 1px solid #DDD9D1; border-radius: 4px; background: #fff; }
  .demo-motif.active { border-color: #5864FF; box-shadow: 0 0 0 2px rgba(88,100,255,.14); }
  .demo-motif img { width: 100%; height: 190px; object-fit: cover; border-radius: 2px; }
  .demo-motif span { display: block; padding: 7px 2px 1px; color: #5D6660; font-size: 11px; }
  .demo-values { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .demo-value { min-width: 60px; padding: 8px 11px; border: 1px solid #D6D3CC; border-radius: 3px; background: #fff; text-align: center; font-size: 12px; font-weight: 600; }
  .demo-value.active { color: #fff; border-color: #5864FF; background: #5864FF; }
  .demo-layout { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 28px; margin-top: 24px; }
  .demo-form { display: grid; gap: 11px; }
  .demo-field { padding: 11px 13px; border: 1px solid #D8D4CD; border-radius: 3px; background: #fff; color: #8A918C; font-size: 12px; }
  .demo-field.large { min-height: 86px; }
  .demo-summary { padding: 16px; border-radius: 4px; background: #EAE7E0; }
  .demo-summary img { width: 82px; aspect-ratio: 210 / 297; object-fit: cover; float: left; margin-right: 13px; border-radius: 2px; }
  .demo-summary strong { display: block; color: #20231F; font-size: 14px; }
  .demo-summary p { color: #707872; font-size: 11px; line-height: 1.45; }
  .demo-summary::after { content: ""; display: block; clear: both; }
  .demo-payments { display: grid; gap: 10px; margin-top: 22px; max-width: 620px; }
  .demo-payment { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; border: 1px solid #D8D4CD; border-radius: 4px; background: #fff; font-weight: 600; font-size: 13px; }
  .demo-payment.active { border-color: #5864FF; box-shadow: 0 0 0 2px rgba(88,100,255,.12); }
  .demo-payment small { color: #7A827D; font-weight: 400; }
  .demo-radio { width: 16px; height: 16px; border: 1px solid #B5BAB6; border-radius: 50%; }
  .demo-payment.active .demo-radio { border: 5px solid #5864FF; }
  .demo-next { display: inline-flex; margin-top: 18px; padding: 10px 16px; border-radius: 3px; background: #5864FF; color: #fff; font-size: 12px; font-weight: 600; }
  .demo-success { grid-column: 1 / -1; display: grid; place-content: center; justify-items: center; padding: 40px; text-align: center; background: #F5F2EC; }
  .demo-success-icon { width: 58px; height: 58px; margin-bottom: 18px; display: grid; place-items: center; border-radius: 50%; background: rgba(88,100,255,.16); color: #5864FF; font-size: 28px; font-weight: 700; }
  .demo-success h3 { color: #161916; font-size: clamp(28px, 4vw, 42px); }
  .demo-success p { max-width: 460px; margin: 10px auto 0; color: #69716C; font-size: 14px; }
  .demo-download { margin-top: 22px; padding: 11px 17px; border-radius: 3px; background: #5864FF; color: #fff; font-size: 12px; font-weight: 600; }

  /* Supporting product shots */
  .shot { margin: 0; }
  .shot-frame {
    aspect-ratio: 4 / 3; border-radius: var(--radius); background: var(--surface);
    border: 1px dashed #454C47; display: grid; place-items: center; padding: 20px; text-align: center;
    color: var(--muted); font-size: 14px; overflow: hidden;
  }
  .shot-frame img { width: 100%; height: 100%; object-fit: cover; }
  .shot-frame--voucher { background: #E9E8E4; border-style: solid; }
  .shot-frame--voucher img { object-fit: contain; filter: drop-shadow(0 10px 18px rgba(20, 18, 45, .16)); }
  .product-secondary { max-width: 820px; margin: 0 auto; }
  .redeem-mock { background: #E9E8E4; border-style: solid; }
  .redeem-card { width: min(100%, 330px); padding: 20px; border-radius: 4px; background: #fff; color: #1C211E; text-align: left; box-shadow: 0 12px 28px rgba(20,24,21,.12); }
  .redeem-label { color: #747C76; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
  .redeem-code { margin: 9px 0 16px; font: 700 21px/1 var(--display); letter-spacing: .08em; }
  .redeem-balances { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .redeem-balance { padding: 11px; border-radius: 3px; background: #F0EFEB; }
  .redeem-balance span { display: block; color: #777F79; font-size: 10px; }
  .redeem-balance strong { display: block; margin-top: 3px; font-size: 18px; }
  .redeem-status { display: inline-flex; margin-top: 14px; padding: 5px 8px; border-radius: 99px; background: #DDF1E5; color: #22603C; font-size: 10px; font-weight: 700; }
  .shot-frame .ph-label { font-weight: 600; color: var(--accent); display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
  .shot figcaption { margin-top: 12px; font-weight: 600; }
  .shot figcaption span { display: block; font-weight: 400; color: var(--muted); font-size: 15px; }


  /* Motif catalogue */
  .motif-section { overflow: hidden; }
  .motif-head {
    display: flex; justify-content: space-between; align-items: end; gap: 24px;
    margin-bottom: 32px;
  }
  .motif-head .section-head { margin-bottom: 0; }
  .motif-controls { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .motif-status { min-width: 92px; text-align: center; color: var(--muted); font: 400 13px/1 var(--mono); font-variant-numeric: tabular-nums; }
  .motif-button {
    width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%;
    background: var(--surface); color: var(--ink); font: 500 20px/1 var(--body); cursor: pointer;
    display: grid; place-items: center; transition: color .15s ease, border-color .15s ease, background .15s ease;
  }
  .motif-button:hover { color: #fff; border-color: var(--accent-solid); background: var(--accent-solid); }
  .motif-button:disabled { opacity: .35; cursor: default; color: var(--muted); border-color: var(--line); background: var(--surface); }
  .motif-rail {
    display: grid; grid-auto-flow: column; grid-auto-columns: clamp(210px, 24vw, 270px); gap: 18px;
    overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory;
    scrollbar-width: thin; scrollbar-color: var(--accent) var(--line); padding: 4px 2px 22px;
  }
  .motif-rail::-webkit-scrollbar { height: 8px; }
  .motif-rail::-webkit-scrollbar-track { background: var(--line); border-radius: 99px; }
  .motif-rail::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 99px; }
  .motif-card { scroll-snap-align: start; min-width: 0; }
  .motif-visual {
    aspect-ratio: 210 / 297; position: relative; overflow: hidden; border-radius: 4px;
    background: var(--surface); border: 1px solid var(--line);
    box-shadow: 0 12px 30px rgba(28, 26, 70, .12);
  }
  .motif-visual img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
  .motif-card:hover .motif-visual img { transform: scale(1.015); }
  .motif-card figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 11px; font: 500 12px/1.4 var(--mono); }
  .motif-card figcaption span:last-child { color: var(--muted); font-weight: 400; }
  .motif-hint { color: var(--muted); font: 400 12px/1.5 var(--mono); margin-top: 12px; }
  .motif-hint a { color: var(--accent); text-underline-offset: 3px; }

  /* Offer + price */
  .offer { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: start; }
  .checklist { list-style: none; display: grid; gap: 14px; }
  .checklist li { padding-left: 34px; position: relative; }
  .checklist li::before {
    content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23748BFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;
  }
  .setup-line { margin-top: 28px; color: var(--muted); font-size: 16px; }
  .price-box { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 36px; }
  .price-box .label { font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; opacity: .7; margin-bottom: 12px; }
  .price { font-stretch: 125%; font-weight: 700; font-size: 56px; line-height: 1; }
  .price span { display: block; font-size: 18px; font-weight: 600; opacity: .8; margin-top: 10px; font-stretch: 100%; }
  .price-sub { margin: 14px 0 24px; font-weight: 600; }
  .price-box .btn-primary { background: var(--accent-solid); color: #fff; }
  .price-box .btn-primary:hover { filter: brightness(1.1); }
  .fineprint { font-size: 13px; opacity: .7; margin-top: 18px; }
  .fineprint a, .form-note a { color: #8790FF; text-underline-offset: 2px; }

  /* Shoperate connection */
  .pos-section { background: #171A18; color: #fff; }
  .pos-card { display: grid; grid-template-columns: .72fr 1.28fr; gap: 56px; align-items: center; }
  .shoperate-lockup { position: relative; align-self: stretch; min-height: 250px; padding: 34px; background: #00B864; border: 1px solid #00B864; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
  .shoperate-lockup:hover { background: #00A95C; border-color: #00A95C; transform: translateY(-2px); }
  .shoperate-lockup:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
  .shoperate-logo { display: block; width: min(100%, 300px); height: auto; filter: brightness(0) invert(1); opacity: 1; }
  .pos-label { position: absolute; right: 34px; bottom: 30px; left: 34px; color: rgba(255,255,255,.76); font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
  .pos-copy .eyebrow { margin-bottom: 18px; background: rgba(0,184,100,.18); color: #62E5A9; }
  .pos-copy h2 { max-width: 640px; font-size: clamp(27px, 3.7vw, 40px); margin-bottom: 18px; }
  .pos-copy > p:not(.eyebrow) { max-width: 650px; color: #B9C0BB; }
  .pos-points { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
  .pos-points li { padding-top: 13px; border-top: 1px solid rgba(0,184,100,.42); color: #E4E8E5; font-size: 14px; line-height: 1.45; }
  .pos-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; color: #62E5A9; font-weight: 600; text-decoration: none; }
  .pos-link::after { content: none; font: 500 14px/1 var(--mono); }
  .pos-link:hover { text-decoration: underline; text-underline-offset: 4px; }

  /* Trust */
  .trust { display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: center; }
  .portrait {
    aspect-ratio: 4 / 5; border-radius: 4px; background: var(--surface); border: 1px solid var(--line);
    overflow: hidden;
  }
  .portrait img { width: 100%; height: 100%; object-fit: cover; }
  .trust h2 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 14px; }
  .trust p { color: var(--muted); margin-bottom: 20px; max-width: 560px; }
  .trust-points { list-style: none; display: grid; gap: 8px; }
  .trust-points li { padding-left: 34px; position: relative; font-weight: 600; }
  .trust-points li::before {
    content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23748BFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;
  }

  /* FAQ */
  .faq { display: grid; gap: 12px; max-width: 780px; }
  details { background: var(--surface); border-radius: var(--radius); }
  summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 22px 26px; border-radius: var(--radius); }
  summary::-webkit-details-marker { display: none; }
  summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--accent); flex-shrink: 0; }
  details[open] summary::after { content: "–"; }
  details p { color: var(--muted); padding: 0 26px 22px; font-size: 16px; margin-top: -6px; }

  /* Lead form */
  .contact { display: grid; grid-template-columns: 1fr; gap: 34px; max-width: 1080px; align-items: start; }
  .contact-copy { padding-top: 8px; }
  .contact h2 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 14px; }
  .contact .intro { max-width: 760px; color: var(--muted); margin-bottom: 28px; }
  .lead-form { display: grid; gap: 16px; }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .lead-form label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
  .lead-form label .opt { font-weight: 400; color: var(--muted); }
  .lead-form input, .lead-form textarea {
    width: 100%; font: inherit; font-size: 16px; padding: 13px 15px; resize: vertical;
    border: 1px solid var(--line); border-radius: 3px; background: var(--surface); color: var(--ink);
  }
  .lead-form input:focus-visible, .lead-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
  .lead-form [aria-invalid="true"] { border-color: #C0262D; }
  .field-error { color: #C0262D; font-size: 14px; font-weight: 600; margin-top: 6px; }
  .field-error:empty { display: none; }
  .lead-form button { justify-self: start; }
  .lead-form button:disabled { opacity: .6; cursor: default; }
  .form-note { font-size: 13px; color: var(--muted); }
  .form-error { font-size: 15px; color: #C0262D; font-weight: 600; }
  .form-error:empty { display: none; }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .form-done { background: var(--surface); border-radius: 4px; padding: 32px; }
  .form-done h3 { font-size: 22px; margin-bottom: 6px; }
  .form-done p { color: var(--muted); }
  .contact-form-column { min-width: 0; }
  .direct-email {
    display: inline-flex; align-items: center; justify-content: center; min-height: 46px; margin-top: 28px;
    padding: 0 18px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px;
    color: #fff; font-size: 14px; font-weight: 650; text-decoration: none;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
  }
  .direct-email:hover { transform: translateY(-1px); border-color: #fff; background: rgba(255,255,255,.1); }

  /* Final conversion section */
  #anfrage { background: var(--accent-solid); color: #fff; border-top: 0; }
  #anfrage .intro { color: rgba(255,255,255,.82); }
  #anfrage .lead-form, #anfrage .form-done {
    background: #F5F6FA; color: #151816; border: 1px solid rgba(255,255,255,.3);
    box-shadow: 0 24px 56px rgba(19, 22, 50, .2);
  }
  #anfrage .lead-form { padding: 30px; border-radius: 4px; }
  #anfrage .lead-form input, #anfrage .lead-form textarea {
    border-color: #D7DAD8; background: #fff; color: #151816;
  }
  #anfrage .lead-form label .opt, #anfrage .form-note, #anfrage .form-done p { color: #626963; }
  #anfrage .form-note a { color: var(--accent-solid); font-weight: 600; text-underline-offset: 2px; }
  #anfrage .lead-form .btn-primary { background: var(--brand-blue); color: #fff; box-shadow: 0 10px 26px rgba(88,101,242,.24); }

  /* Footer */
  footer { padding: 28px 0 48px; font: 400 13px/1.4 var(--mono); color: var(--muted); }
  footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

  @media (max-width: 900px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 860px) {
    .hero .wrap, .offer, .contact, .grid-3, .trust, .pos-card { grid-template-columns: 1fr; }
    .hero { padding: 24px 0 64px; }
    .a4 { max-width: 240px; }
    section { padding: 64px 0; }
    .trust .portrait { max-width: 240px; }
    .shoperate-lockup { min-height: 190px; }
    .purchase-panel { grid-template-columns: 160px 1fr; }
    .demo-sidebar { padding: 24px 18px; }
    .demo-content { padding-inline: 28px; }
    .client-projects .wrap { grid-template-columns: 1fr; gap: 14px; }
  }
  @media (max-width: 560px) {
    .wrap { padding: 0 16px; }
    .grid-2, .grid-4, .field-row { grid-template-columns: 1fr; }
    .price { font-size: 46px; }
    .price-box, .form-done { padding: 28px 24px; }
    .motif-head { align-items: start; }
    .motif-controls { display: none; }
    .motif-rail { grid-auto-columns: min(76vw, 260px); margin-right: -16px; }
    .actions { align-items: stretch; }
    .actions .btn { width: 100%; }
    .lead-form button { width: 100%; }
    #anfrage .lead-form { padding: 24px 18px; }
    .pos-points { grid-template-columns: 1fr; }
    .shoperate-lockup { min-height: 160px; padding: 24px; }
    .purchase-tabs { display: flex; overflow-x: auto; margin-right: -16px; padding-right: 16px; scroll-snap-type: x mandatory; }
    .purchase-tab { min-width: 210px; scroll-snap-align: start; }
    .browser-bar { height: 36px; padding-inline: 11px; }
    .browser-address { width: 68%; }
    .purchase-stage { height: 570px; }
    .purchase-panel { grid-template-columns: 1fr; }
    .demo-sidebar { display: none; }
    .demo-content { padding: 25px 18px; }
    .demo-content h3 { font-size: 26px; }
    .demo-motifs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .demo-motif:nth-child(3) { display: none; }
    .demo-motif img { height: 180px; }
    .demo-layout { grid-template-columns: 1fr; }
    .demo-summary { display: none; }
    .demo-success { padding: 28px 20px; }
    .hero h1 { font-size: clamp(31px, 10vw, 42px); }
    .fineprint, .evidence-note { font-size: 12px; }
  }

  /* Cosmetic Schuha: responsive illustrations of the current shop flow */
  .purchase-stage { height: auto; }
  .purchase-panel { height: auto; display: block; }
  .purchase-panel picture, .purchase-panel img { display: block; width: 100%; height: auto; }
  .purchase-panel[hidden] { display: none; }

/* v2-theme */
:root {
    --bg: #090B0D;
    --surface: #121519;
    --surface-2: #171B20;
    --ink: #F4F5F7;
    --muted: #C8CDD5;
    --line: rgba(255,255,255,.105);
    --brand-blue: #6472FF;
    --brand-blue-light: #8994FF;
    --brand-blue-lighter: #A9B0FF;
    --brand-blue-soft: rgba(100,114,255,.16);
    --radius: 14px;
  }

  body {
    min-width: 320px;
    background:
      radial-gradient(900px 620px at 78% -140px, rgba(100,114,255,.18), transparent 68%),
      radial-gradient(700px 500px at -10% 18%, rgba(73,194,176,.07), transparent 66%),
      var(--bg);
  }

  .wrap { max-width: 1240px; padding-inline: 32px; }
  #aktion, #motive, #ablauf, #angebot, #zahlungsdienstleister, #faq, #anfrage { scroll-margin-top: 92px; }

  header {
    position: sticky; top: 0; z-index: 50; padding: 0;
    border-bottom: 1px solid rgba(255,255,255,.075);
    background: rgba(9,11,13,.78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  }
  header .wrap { min-height: 72px; justify-content: space-between; }
  .brand-lockup { display: flex; align-items: center; gap: 13px; min-width: max-content; }
  .brand { font-size: 18px; }
  .brand-product { padding-left: 13px; border-left: 1px solid var(--line); color: var(--muted); font-size: 13px; }
  .site-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
  .site-nav a { color: var(--muted); text-decoration: none; font-size: 14px; transition: color .18s ease; }
  .site-nav a:hover { color: var(--ink); }
  .header-actions { display: flex; align-items: center; gap: 8px; margin-left: 10px; }
  .header-demo { padding: 9px 18px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; color: var(--ink); font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap; }
  .header-demo:hover { border-color: rgba(255,255,255,.55); }
  .header-cta { padding: 10px 20px; border-radius: 999px; background: var(--ink); color: #0B0D10 !important; font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap; }
  .header-cta:hover { color: #0B0D10 !important; filter: brightness(.92); }

  .btn { min-height: 48px; padding: 0 21px; border-radius: 999px; font-weight: 600; transition: transform .18s ease, filter .18s ease, background .18s ease, border-color .18s ease; }
  .btn:hover { transform: translateY(-1px); }
  .btn-primary { background: var(--brand-blue); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 10px 28px rgba(100,114,255,.22); font-size: 16px; }
  .btn-ghost { color: var(--ink); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.025); }
  .btn-ghost:hover { border-color: rgba(255,255,255,.38); background: rgba(255,255,255,.055); }

  .hero { min-height: 760px; padding: 92px 0 104px; overflow: hidden; }
  .hero .wrap { grid-template-columns: minmax(0,1.02fr) minmax(430px,.98fr); gap: clamp(50px,7vw,110px); }
  .hero-copy { position: relative; z-index: 2; }
  .eyebrow { padding: 8px 12px; border: 0; background: rgba(88,100,255,.35); color: #AEB5FF; }
  .hero h1 { max-width: 720px; margin-bottom: 20px; font-size: clamp(46px,5.3vw,70px); line-height: .98; letter-spacing: -.052em; color: var(--ink); }
  .hero h1 .soft { display: block; margin-top: 9px; color: inherit; }
  .hero-tagline { max-width: 620px; margin-bottom: 26px; color: var(--brand-blue-light); font-size: clamp(23px,2.35vw,31px); font-weight: 700; line-height: 1.2; }
  .hero-benefits { display: grid; gap: 12px; max-width: 650px; margin-bottom: 32px; }
  .hero-benefit { display: grid; grid-template-columns: 38px 1fr; gap: 13px; align-items: center; }
  .hero-benefit-icon {
    width: 38px; height: 38px; display: grid; place-items: center;
    border: 1px solid rgba(137,148,255,.18); border-radius: 10px;
    background: var(--brand-blue-soft); color: var(--brand-blue-lighter);
  }
  .hero-benefit-icon svg { width: 20px; height: 20px; }
  .hero-benefit p { color: #D1D5DB; font-size: 17px; line-height: 1.35; }
  .hero-benefit strong { display: block; color: var(--ink); font-size: 17px; font-weight: 700; }
  .hero-benefit p span { display: block; color: var(--muted); }
  .hero-benefit.security-note { display: grid; margin-top: 0; color: inherit; font: inherit; text-decoration: none; }
  .hero-benefit.security-note:hover strong { color: var(--brand-blue-lighter); }
  .security-icon { border: 1px solid rgba(137,148,255,.16); border-radius: 9px; }

  .a4-wrap {
    position: relative; min-height: 600px; isolation: isolate; display: block;
    border: 1px solid rgba(255,255,255,.09); border-radius: 28px;
    background: radial-gradient(circle at 50% 42%,rgba(100,114,255,.21),transparent 44%),#0E1115;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 32px 90px rgba(0,0,0,.34);
  }
  .a4 { position: absolute; top: 78px; left: 50%; z-index: 4; width: 46%; max-width: 286px; transform: translateX(-50%) rotate(-1.5deg); border-radius: 9px; box-shadow: 0 34px 70px rgba(0,0,0,.5); }
  .a4--back { z-index: 2; width: 39%; opacity: .68; filter: saturate(.85) brightness(.76); }
  .a4--left { top: 128px; left: 12%; transform: rotate(-9deg); }
  .a4--right { top: 117px; right: 10%; left: auto; transform: rotate(8deg); }
  .stage-chip { position: absolute; z-index: 6; padding: 10px 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(18,21,25,.82); box-shadow: 0 12px 32px rgba(0,0,0,.24); backdrop-filter: blur(12px); color: #D8DCE2; font: 500 11px/1 var(--mono); }
  .stage-chip--top { top: 24px; left: 24px; }
  .stage-benefits {
    position: absolute; right: 18px; bottom: 18px; left: 18px; z-index: 6;
    display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px 16px;
    padding: 14px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px;
    background: rgba(14,17,21,.88); box-shadow: 0 18px 38px rgba(0,0,0,.3);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .stage-benefit { display: flex; align-items: center; gap: 9px; min-width: 0; color: #DDE1E6; font: 500 10.5px/1.35 var(--mono); }
  .stage-benefit::before { content: ""; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--brand-blue-light); box-shadow: 0 0 12px rgba(137,148,255,.72); }

  .client-projects { padding: 16px 0 64px; border: 0; background: transparent; }
  .client-projects .wrap { display: block; }
  .client-projects h2 { margin-bottom: 18px; font-size: clamp(27px,3vw,38px); line-height: 1.05; }
  .client-projects-label { margin-bottom: 16px; color: var(--brand-blue-lighter); font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
  .client-projects-label span { margin-left: 8px; color: var(--muted); font-weight: 400; letter-spacing: 0; text-transform: none; }
  .client-projects-list .btn { min-height: 42px; padding-inline: 17px; }

  section { position: relative; padding: 112px 0; border-top-color: rgba(255,255,255,.08); }
  .section-head { max-width: 800px; margin-bottom: 58px; }
  .section-head::before { display: block; margin-bottom: 18px; color: #AEB5FF; font: 600 14px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
  .motif-section .section-head::before { content: "Gestaltung"; }
  #ablauf .section-head::before { content: "Produkt"; }
  .impact-section .section-head::before { content: none; display: none; }
  #angebot .section-head::before { content: "Leistung & Preis"; }
  #faq .section-head::before { content: "Antworten"; }
  .section-head h2 { font-size: clamp(38px,5vw,62px); line-height: 1; letter-spacing: -.045em; }
  .section-head p { max-width: 710px; color: #CCD1D8; font-size: 18px; }

  .motif-section { padding-top: 116px; background: linear-gradient(180deg,#0B0E11 0%,#0E1115 100%); }
  .motif-head { align-items: end; }
  .motif-rail { grid-auto-columns: clamp(250px,25vw,330px); gap: 22px; margin-inline: calc((100vw - min(1240px,100vw)) / -2); padding-inline: max(32px,calc((100vw - 1176px) / 2)); }
  .motif-visual { border-radius: 12px; box-shadow: 0 24px 55px rgba(0,0,0,.32); }
  .motif-button { width: 48px; height: 48px; background: rgba(255,255,255,.025); }

  #ablauf { background: #090B0D; }
  .purchase-demo { margin-bottom: 54px; }
  .purchase-tabs { gap: 0; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: #101318; }
  .purchase-tab { border: 0; border-radius: 9px; }
  .purchase-tab[aria-selected="true"] { border: 0; background: #252B56; }
  .browser-frame { border-color: rgba(255,255,255,.14); border-radius: 18px; box-shadow: 0 40px 100px rgba(0,0,0,.42); }
  .product-secondary { max-width: none; margin-top: 44px; gap: 28px; }
  .shot-frame { border-radius: 16px; }
  .shot figcaption { font-size: 17px; }

  .grid-3 { grid-template-columns: 1.7fr 1fr 1fr; gap: 18px; }
  .card { border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018)); }
  .stat-card { min-height: 285px; display: flex; flex-direction: column; justify-content: flex-end; border-top: 1px solid var(--line); }
  .stat-card:first-child { background: radial-gradient(circle at 88% 12%,rgba(100,114,255,.2),transparent 42%),var(--surface); }
  .stat-card .stat-num { margin-bottom: auto; color: var(--brand-blue-light); font-size: clamp(52px,6vw,78px); }
  .evidence-note { color: #A8AFB9; }
  .impact-section { padding: 46px 0 52px; background: #090B0D; }
  .impact-section .section-head { max-width: 820px; margin-bottom: 20px; }
  .impact-section .section-head h2 { font-size: clamp(23px,2.5vw,31px); line-height: 1.1; letter-spacing: -.025em; }
  .impact-stats { gap: 14px; }
  .grid-3.impact-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .impact-stats .stat-card { min-height: 156px; padding: 20px 22px; }
  .impact-stats .stat-num { margin-bottom: 24px; font-size: clamp(39px,4vw,50px); }
  .impact-stats h3 { margin-bottom: 2px; font-size: 17px; }
  .impact-stats .stat-place { color: var(--muted); font-size: 15px; }
  .impact-stats sup { color: var(--brand-blue-lighter); font-size: .6em; vertical-align: super; }
  .impact-section .evidence-note { margin-top: 12px; font-size: 11px; }

  #angebot { background: linear-gradient(180deg,#0B0E11,#090B0D); }
  .offer { grid-template-columns: minmax(0,1.08fr) minmax(390px,.92fr); gap: clamp(54px,7vw,96px); }
  .checklist { gap: 17px; }
  .checklist li { color: #D6DAE0; }
  .checklist li::before,.trust-points li::before,.hero-checks li::before {
    border: 0; border-radius: 50%;
    background: rgba(88,100,255,.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23AEB5FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;
    box-shadow: none;
  }
  .price-box { position: sticky; top: 106px; padding: 42px; border-radius: 20px; background: radial-gradient(circle at 85% 0,rgba(100,114,255,.2),transparent 44%),var(--surface-2); box-shadow: 0 30px 80px rgba(0,0,0,.28); }
  .price { color: var(--ink); font-size: 66px; }
  .price-sub { color: var(--brand-blue-lighter); }
  .price-box .price-sub { margin-bottom: 6px; }
  .price-fee-note { margin: 0 0 22px; color: #BFC7C3; font-size: 12px; line-height: 1.45; }

  .trust { grid-template-columns: 340px 1fr; gap: 76px; }
  .portrait { border-radius: 18px; box-shadow: 0 28px 70px rgba(0,0,0,.32); }
  .trust h2 { font-size: clamp(38px,5vw,60px); line-height: 1; }
  .trust p { max-width: 650px; font-size: 18px; }
  .pos-copy > p:not(.eyebrow) { color: #C8CEC9; }
  .fineprint { color: #B6BDC7; opacity: 1; }

  .pos-section { background: #0C100E; }
  .pos-card { gap: 78px; }
  .shoperate-lockup { min-height: 360px; border-radius: 20px; box-shadow: 0 28px 70px rgba(0,184,100,.12); }
  .pos-copy h2 { font-size: clamp(36px,4.6vw,56px); line-height: 1; }

  #faq .wrap { display: grid; grid-template-columns: minmax(240px,.65fr) minmax(0,1.35fr); gap: 80px; align-items: start; }
  #faq .section-head { position: sticky; top: 112px; margin: 0; }
  .faq { max-width: none; gap: 8px; }
  details { border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
  summary { padding: 22px 24px; }

  #anfrage { padding-block: 124px; background: #5865F2; }
  #anfrage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(700px 460px at 82% 0,rgba(255,255,255,.2),transparent 70%); }
  #anfrage .contact { position: relative; }
  .contact h2 { max-width: 980px; font-size: clamp(42px,5.7vw,68px); line-height: .98; }
  #anfrage .lead-form,#anfrage .form-done { border-radius: 16px; }
  #anfrage .lead-form { padding: clamp(28px,3.2vw,42px); gap: 20px; }
  #anfrage .field-row { gap: 20px; }
  #anfrage .lead-form label { margin-bottom: 8px; }
  #anfrage .lead-form input { min-height: 54px; }
  #anfrage .lead-form textarea { min-height: 150px; }
  .form-actions { display: grid; grid-template-columns: max-content 1fr; gap: 20px; align-items: center; }
  .form-actions .form-note { max-width: 480px; line-height: 1.5; }
  footer { border-top: 1px solid var(--line); padding: 30px 0 42px; }
  footer a { color: #8E969F; text-decoration: none; transition: color .18s ease; }
  footer a:hover { color: #C8CDD5; }

  .campaign-bar {
    position: relative; z-index: 51; overflow: hidden;
    border: 0; background: #123B32; color: #fff; box-shadow: none;
  }
  .campaign-bar .wrap {
    position: relative; min-height: 56px; display: flex; align-items: center; justify-content: center;
    text-align: center; line-height: 1.2;
  }
  .campaign-bar-copy { display: flex; align-items: baseline; justify-content: center; gap: 11px; flex-wrap: wrap; }
  .campaign-bar-title { color: rgba(255,255,255,.86); font-size: 15px; }
  .campaign-bar strong { color: var(--campaign-gold); font-family: var(--display); font-size: 22px; font-stretch: 125%; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; }
  .campaign-bar-limit { color: rgba(255,255,255,.78); font-size: 13px; }
  .campaign-dot { padding-inline: 3px; color: var(--campaign-gold); font-weight: 700; }

  #aktion { padding: 88px 0; background: linear-gradient(180deg,#0E1115,#090B0D); }
  #aktion .section-head { max-width: 860px; margin-bottom: 42px; }
  #aktion .section-head::before { content: "So starten Sie"; }
  .campaign-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
  .campaign-step {
    min-height: 245px; padding: 30px; border: 1px solid var(--line); border-radius: 16px;
    background: linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
  }
  .campaign-step--link {
    color: inherit; text-decoration: none; cursor: pointer;
    border-color: rgba(137,148,255,.42);
    background: radial-gradient(circle at 88% 12%,rgba(100,114,255,.18),transparent 42%),rgba(255,255,255,.03);
    transition: transform .18s ease,border-color .18s ease,background .18s ease;
  }
  .campaign-step--link:hover { transform: translateY(-3px); border-color: var(--brand-blue-light); background-color: rgba(255,255,255,.055); }
  .campaign-step .step-number {
    width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 40px;
    border-radius: 50%; background: rgba(100,114,255,.3); color: var(--brand-blue-lighter);
    font: 700 19px/1 var(--mono);
  }
  .campaign-step h3 { margin-bottom: 10px; font-size: 25px; }
  .campaign-step p { color: var(--muted); font-size: 17px; line-height: 1.55; }
  .campaign-step-cta { display: block; margin-top: 20px; color: var(--brand-blue-lighter); font-size: 14px; font-weight: 700; }

  .price-box {
    overflow: hidden; border: 1px solid rgba(218,173,89,.38);
    background: radial-gradient(circle at 88% 0,rgba(97,159,144,.38),transparent 46%),linear-gradient(145deg,#102B25,#0C1917 72%);
  }
  .campaign-title {
    color: #F4F5F7; font-family: var(--display); font-size: clamp(29px,3vw,40px); font-stretch: 125%;
    font-weight: 800; letter-spacing: -.035em; line-height: 1; text-wrap: balance;
  }
  .campaign-title span { display: block; margin-top: 10px; color: #E9D1A1; font-size: .82em; letter-spacing: .025em; text-transform: uppercase; }
  .gift-ribbon {
    position: relative; height: 12px; margin: 28px -42px 27px;
    background: linear-gradient(90deg,#9A5B18 0%,#E2B967 28%,#B97120 50%,#F2D9A0 76%,#B16D20 100%);
    box-shadow: 0 7px 16px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.42);
  }
  .price-old { margin: 2px 0 -2px; color: #C6CBC8; font-size: 19px; }
  .price-old s { text-decoration-thickness: 2px; text-decoration-color: #D9A350; }
  .price-box .price-sub { color: #D9E4E0; }
  .campaign-terms { margin-top: 18px; color: #B6BDC7; font-size: 12px; line-height: 1.55; }

  @keyframes v2-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  .hero-copy { animation: v2-rise .65s ease-out both; }
  .a4-wrap { animation: v2-rise .8s .08s ease-out both; }

  @media (max-width: 980px) {
    .site-nav { display: none; }
    .hero { min-height: auto; padding-top: 70px; }
    .hero .wrap { grid-template-columns: 1fr; }
    .hero h1 { max-width: 820px; }
    .a4-wrap { min-height: 590px; }
    .offer { grid-template-columns: 1fr; }
    .price-box { position: static; }
    #faq .wrap { grid-template-columns: 1fr; gap: 42px; }
    #faq .section-head { position: static; }
  }

  @media (max-width: 720px) {
    .wrap { padding-inline: 18px; }
    header .wrap { min-height: 62px; }
    .brand-product { display: none; }
    .header-actions { margin-left: auto; gap: 6px; }
    .header-demo { display: none; }
    .header-demo, .header-cta { padding: 9px 11px; font-size: 12px; }
    .hero { padding: 54px 0 72px; }
    .hero h1 { font-size: clamp(38px,11.5vw,52px); }
    .hero h1 .soft { margin-top: 7px; }
    .hero-tagline { font-size: clamp(21px,6.5vw,27px); }
    .a4-wrap { min-height: 450px; border-radius: 20px; }
    .a4 { top: 66px; width: 54%; }
    .a4--back { width: 43%; }
    .a4--left { top: 107px; left: 7%; }
    .a4--right { top: 102px; right: 6%; }
    .stage-chip--top { top: 16px; left: 16px; }
    .stage-benefits { right: 12px; bottom: 12px; left: 12px; gap: 6px 11px; padding: 12px; }
    .stage-benefit { gap: 7px; font-size: 9.5px; }
    .client-projects { padding-bottom: 54px; }
    .client-projects-label span { display: block; margin: 8px 0 0; }
    .campaign-bar .wrap { min-height: 68px; padding-block: 10px; }
    .campaign-bar-copy { gap: 4px 9px; }
    .campaign-bar-title { font-size: 13px; }
    .campaign-bar strong { font-size: 19px; }
    .campaign-bar-limit { width: 100%; font-size: 11px; }
    #aktion { padding: 72px 0; }
    .campaign-steps { grid-template-columns: 1fr; }
    .campaign-step { min-height: 0; }
    .campaign-step .step-number { margin-bottom: 28px; }
    .gift-ribbon { margin-inline: -34px; }
    section { padding: 82px 0; }
    .section-head h2 { font-size: clamp(38px,11vw,52px); }
    .impact-section { padding: 44px 0 50px; }
    .impact-section .section-head { margin-bottom: 22px; }
    .impact-section .section-head h2 { font-size: clamp(22px,6.8vw,29px); }
    .grid-3.impact-stats { grid-template-columns: 1fr; }
    .impact-stats .stat-card { min-height: 142px; padding: 20px; }
    .impact-stats .stat-num { margin-bottom: 24px; }
    .form-actions { grid-template-columns: 1fr; gap: 14px; }
    .direct-email { width: 100%; }
    .motif-rail { margin-right: -18px; margin-left: 0; padding-left: 0; padding-right: 18px; }
    .grid-3 { grid-template-columns: 1fr; }
    .stat-card { min-height: 230px; }
    .trust { grid-template-columns: 1fr; gap: 42px; }
    .trust .portrait { max-width: 290px; }
    .pos-card { gap: 44px; }
    .shoperate-lockup { min-height: 230px; }
    #anfrage { padding-block: 84px; }
  }

  @media (max-width: 360px) {
    header .wrap { flex-wrap: wrap; justify-content: center; gap: 9px; padding-block: 10px; }
    .brand-lockup { width: 100%; justify-content: center; }
    .header-actions { width: 100%; margin-left: 0; }
    .header-actions a { flex: 1; text-align: center; }
    #anfrage { scroll-margin-top: 130px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-copy,.a4-wrap { animation: none; }
  }

/* scenario-arguments */
.argument-section { background: #101318; }
  .argument-section .section-head { max-width: 920px; margin-bottom: 36px; }
  .argument-section .section-head > p:last-child { max-width: 760px; }
  .argument-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 0; }
  .argument-tab { appearance: none; display: block; min-width: 0; padding: 24px 26px; border: 1px solid var(--line); border-radius: 14px 14px 0 0; background: #15191F; color: var(--muted); text-align: left; cursor: pointer; font-family: var(--body); transition: color .18s ease, background .18s ease, border-color .18s ease; }
  .argument-tab > span { display: block; margin-bottom: 10px; font: 400 11px/1.4 var(--mono); }
  .argument-tab > strong { display: block; font: 650 clamp(18px,2vw,23px)/1.25 var(--body); letter-spacing: -.02em; }
  .argument-tab:hover { color: var(--ink); border-color: rgba(137,148,255,.55); }
  .argument-tab[aria-selected="true"] { border-color: #8994FF; border-bottom-color: #222741; background: #222741; color: #fff; box-shadow: inset 0 3px #8994FF; }
  .argument-tab[aria-selected="true"] > span { color: #B9C0FF; }
  .argument-panel { padding: 40px 34px 30px; border: 1px solid rgba(137,148,255,.3); border-top: 0; border-radius: 0 0 16px 16px; background: linear-gradient(180deg,#222741 0%,#171B27 190px,#141820 100%); }
  .argument-panel + .argument-panel { margin-top: 24px; }
  .argument-tabs:not([hidden]) ~ .argument-panel { margin-top: 0; }
  .argument-intro { max-width: 850px; margin-bottom: 36px; }
  .argument-intro h3 { max-width: 790px; margin-bottom: 17px; font-size: clamp(29px,3.3vw,41px); line-height: 1.1; letter-spacing: -.04em; }
  .argument-intro p { max-width: 810px; color: #CBD0DB; font-size: 17px; line-height: 1.6; }
  .argument-panel .evidence-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .argument-panel .evidence-item { padding-top: 0; }
  .argument-panel .evidence-number { font-size: clamp(39px,4.4vw,58px); }
  .argument-panel .evidence-word { font-size: clamp(29px,3vw,39px); min-height: 58px; display: flex; align-items: center; line-height: 1.1; }
  .argument-panel .evidence-item h4 { margin-bottom: 12px; font: 650 18px/1.3 var(--body); }
  .argument-panel .evidence-item > p { font-size: 15px; }
  .argument-panel .evidence-item > .evidence-source { font-size: 11px; }
  .argument-takeaway { display: grid; grid-template-columns: minmax(150px,.7fr) 1.3fr; gap: 30px; padding-top: 24px; margin-top: 30px; border-top: 1px solid var(--line); }
  .argument-takeaway > strong { color: var(--ink); font-size: 17px; line-height: 1.4; }
  .argument-takeaway > p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
  .argument-integration { display: block; margin-top: 25px; padding: 18px 20px; border: 1px solid rgba(0,184,100,.3); border-radius: 10px; color: #C1E9D6; font-size: 14px; line-height: 1.6; text-decoration: none; }
  .argument-integration strong { color: #7DE7B4; }
  .argument-integration:hover { background: rgba(0,184,100,.07); }
  .argument-cases { margin-top: 50px; padding-top: 40px; border-top: 1px solid var(--line); }
  .argument-cases-head { max-width: 790px; margin-bottom: 26px; }
  .argument-cases-head .section-kicker { margin-bottom: 12px; }
  .argument-cases-head h3 { font-size: clamp(24px,2.8vw,33px); line-height: 1.15; margin-bottom: 12px; }
  .argument-cases-head > p:last-child { color: var(--muted); font-size: 15px; }
  .argument-cases .stat-card { min-height: 200px; }
  .argument-cases .stat-num { margin-bottom: 20px; }
  .argument-cases .case-context { margin-top: 12px; color: #ADB5C0; font-size: 12px; line-height: 1.6; }
  .argument-cases .evidence-note { max-width: none; font-size: 11px; }
  .argument-next { margin-top: 30px; }
  .purchase-heading { margin-bottom: 22px; font-size: 22px; }
  @media (max-width: 980px) {
    .argument-tab { padding: 20px 18px; }
    .argument-tab > strong { font-size: 18px; }
    .argument-panel { padding: 32px 24px 26px; }
    .argument-panel .evidence-item { padding-right: 20px; }
    .argument-panel .evidence-item + .evidence-item { padding-left: 20px; }
    .argument-panel .evidence-word { font-size: 29px; }
  }
  @media (max-width: 720px) {
    .argument-section { padding-block: 56px; }
    .argument-tabs { grid-template-columns: 1fr; gap: 6px; margin-bottom: 12px; }
    .argument-tab { display: flex; align-items: center; gap: 16px; padding: 17px 18px; border-radius: 9px; }
    .argument-tab > span { margin: 0; width: 28px; flex: 0 0 28px; font-size: 0; }
    .argument-tab > span::first-letter { font-size: 0; }
    .argument-tab:nth-child(1) > span::after { content: '01'; font-size: 12px; }
    .argument-tab:nth-child(2) > span::after { content: '02'; font-size: 12px; }
    .argument-tab:nth-child(3) > span::after { content: '03'; font-size: 12px; }
    .argument-tab > strong { font-size: 17px; }
    .argument-tab[aria-selected="true"] { border-bottom-color: #8994FF; box-shadow: inset 3px 0 #8994FF; }
    .argument-panel { padding: 27px 22px 25px; border-top: 1px solid rgba(137,148,255,.3); border-radius: 12px; }
    .argument-intro { margin-bottom: 28px; }
    .argument-intro h3 { font-size: 29px; }
    .argument-intro p { font-size: 16px; }
    .argument-panel .evidence-grid { grid-template-columns: 1fr; }
    .argument-panel .evidence-item { padding: 0 0 24px; }
    .argument-panel .evidence-item + .evidence-item { padding: 24px 0; }
    .argument-panel .evidence-item:last-child { padding-bottom: 0; }
    .argument-panel .evidence-number { font-size: 47px; }
    .argument-panel .evidence-word { font-size: 35px; min-height: 0; }
    .argument-takeaway { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
    .argument-cases { margin-top: 36px; padding-top: 30px; }
    .argument-cases .grid-3.impact-stats { grid-template-columns: 1fr; }
    .argument-cases .stat-card { min-height: 180px; }
    .argument-next .btn { width: 100%; font-size: 13px; padding-inline: 12px; }
  }

/* compact-copy */
.hero-description { max-width: 520px; margin-bottom: 22px; font-size: 18px; }
  .hero-reassurance, .hero-terms { max-width: 550px; }
  .argument-section .section-head { margin-bottom: 28px; }
  .argument-tab > span { margin-bottom: 7px; }
  .argument-panel { padding: 28px 30px 24px; }
  .argument-intro { margin-bottom: 28px; }
  .argument-intro h3 { margin-bottom: 0; font-size: clamp(27px,3vw,36px); }
  .argument-panel .evidence-number { font-size: clamp(37px,4vw,52px); margin-bottom: 12px; }
  .argument-panel .evidence-word { min-height: 52px; font-size: clamp(29px,3vw,39px); }
  .argument-panel .evidence-item h4 { font-size: 17px; margin-bottom: 7px; }
  .argument-panel .evidence-item > p { font-size: 15px; line-height: 1.5; }
  .argument-panel .evidence-item > .evidence-source { font-size: 11px; margin-top: 12px; }
  .argument-summary { margin-top: 22px; color: var(--muted); font-size: 14px; }
  .argument-cases { margin-top: 26px; padding-top: 24px; }
  .cases-title { margin-bottom: 18px; color: var(--ink); font: 600 19px/1.3 var(--body); }
  .argument-cases .grid-3.impact-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .argument-cases .stat-card { min-height: 122px; padding: 18px 20px; }
  .argument-cases .stat-num { margin-bottom: 12px; font-size: clamp(32px,3.5vw,44px); }
  .argument-cases .stat-card h4 { font: 500 14px/1.4 var(--body); color: var(--muted); }
  .argument-cases .evidence-note { font-size: 10px; line-height: 1.6; }
  .argument-next { margin-top: 24px; }
  .argument-integration { margin-top: 18px; padding: 12px 16px; }
  .site-nav { gap: 23px; }
  .motif-section { padding-block: 72px; }
  @media (max-width: 720px) {
    .hero-description { font-size: 17px; }
    .argument-panel { padding: 24px 20px; }
    .argument-intro h3 { font-size: 27px; }
    .argument-panel .evidence-item { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 0 14px; align-items: start; padding: 0 0 20px; }
    .argument-panel .evidence-item + .evidence-item { padding: 20px 0; }
    .argument-panel .evidence-number { grid-column: 1; grid-row: 1 / span 2; font-size: 28px; margin: 0; }
    .argument-panel .evidence-word { font-size: 24px; min-height: 0; }
    .argument-panel .evidence-item h4, .argument-panel .evidence-item > p { grid-column: 2; }
    .argument-panel .evidence-item h4 { font-size: 15px; }
    .argument-panel .evidence-item > p { font-size: 14px; }
    .argument-panel .evidence-item > .evidence-source { grid-column: 1 / -1; font-size: 10px; }
    .argument-cases .grid-3.impact-stats { gap: 7px; }
    .argument-cases .stat-card { padding: 14px 6px; min-height: 88px; }
    .argument-cases .stat-num { font-size: clamp(18px,5vw,25px); margin-bottom: 9px; white-space: nowrap; }
    .argument-cases .stat-card h4 { font-size: 10px; overflow-wrap: anywhere; }
    .motif-section { padding-block: 56px; }
  }

/* review-refinements */
#faq details[id] { scroll-margin-top: 92px; }
  @media (max-width: 360px) { #faq details[id] { scroll-margin-top: 130px; } }
  .argument-tab > strong { font-size: clamp(17px,1.7vw,21px); }
  .scenario-objections { display: grid; gap: 8px; margin-top: 26px; }
  .scenario-objections details { background: var(--brand-blue-soft); border-color: var(--line); }
  .scenario-objections summary { padding: 15px 18px; font-size: 15px; }
  .scenario-objections p { padding: 0 18px 17px; margin: 0; font-size: 14px; }
  .scenario-objections a, .faq p a { color: var(--brand-blue-light); text-underline-offset: 3px; }
  .case-summary { display: grid; grid-template-columns: minmax(150px,.5fr) 1fr; gap: 26px; align-items: center; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--brand-blue-soft); }
  .case-summary .case-result { margin: 0; color: var(--brand-blue-lighter); font: 700 47px/1 var(--display); letter-spacing: -.04em; }
  .case-summary h4 { margin-bottom: 7px; font: 600 18px/1.3 var(--body); }
  .case-summary p { color: var(--muted); font-size: 14px; }
  .campaign-context { padding-top: 16px; margin-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.6; }
  .campaign-context strong { color: var(--ink); }
  .campaign-context a { color: inherit; text-underline-offset: 3px; }
  .motif-note { margin-top: 10px; color: var(--muted); font-size: 13px; }
  @media (max-width: 720px) {
    .argument-tab > strong { font-size: 16px; }
    .case-summary { grid-template-columns: 1fr; gap: 12px; padding: 18px; }
    .case-summary .case-result { font-size: 40px; }
    .case-summary h4 { font-size: 16px; }
  }

/* Gutscheinshop: current layout, promoted from V4. */
:root { --surface-2: #15191f; --shoperate-green: #009f56; --shoperate-green-hover: #008d4d; }
[hidden] { display: none !important; }
/* Source links remain unlined, including hover and keyboard focus. */
:is(.price-demand-source, .metric-sources, .evidence-source) a,
a.sales-example-source, a.faq-source { text-decoration: none; }
.brand-product { font-weight: 600; letter-spacing: .035em; }
.header-cta { transition: background-color .2s ease, color .2s ease; }
.header-cta.is-promoted, .header-cta.is-promoted:hover { background: var(--brand-blue); color: #fff !important; }
.regular-only { display: none; }
html[data-campaign="ended"] .campaign-only { display: none !important; }
html[data-campaign="ended"] .regular-only { display: revert !important; }
header .wrap { gap: 18px; }
.header-demo { display: none; }
.site-nav { gap: 23px; }
.site-nav a { font-size: 15px; }
.hero { min-height: 0; padding: 66px 0 37px; border: 0; background: transparent; }
.hero .wrap { display: block; }
.hero-copy { max-width: 1000px; margin-inline: auto; text-align: center; }
.hero h1 { max-width: 1000px; margin: 0 auto 26px; font-size: clamp(45px,6vw,76px); line-height: 1.02; letter-spacing: -.055em; }
.hero h1 .soft { display: block; margin-top: 7px; }
.hero-description { max-width: 750px; margin: 0 auto 28px; color: var(--muted); font-size: 19px; line-height: 1.65; text-wrap: pretty; }
.hero .actions { justify-content: center; gap: 12px; }
.hero .btn { min-height: 48px; font-size: 14px; }
#ablauf.showcase { padding: 0 0 48px; border: 0; background: transparent; }
.showcase > .wrap { max-width: 1440px; padding-inline: 32px; }
.purchase-demo { margin: 0; }
.purchase-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 auto 24px; padding: 0; background: none; border: 0; border-radius: 0; }
.purchase-tab { display: inline-flex; justify-content: center; align-items: center; min-width: 0; min-height: 41px; padding: 10px 21px; border: 1px solid #303640; border-radius: 999px; color: #aeb5bf; background: transparent; font: 500 13px/1.2 var(--body); text-align: center; }
.purchase-tab:hover { background: #1c222b; color: #fff; border-color: #515c71; }
.purchase-tab[aria-selected="true"] { color: #fff; background: #5864ff; border: 1px solid #7580ff; box-shadow: none; }
.browser-frame { border-radius: 14px; border: 1px solid #353b46; background: #f5f4f1; box-shadow: 0 30px 85px #0005; }
.browser-bar { height: 35px; background: #1b2028; }
.browser-address { width: min(60%,500px); padding-block: 5px; font-size: 10px; background: #282e38; color: #b4bccb; }
.purchase-stage { height: auto; background: #eeefed; }
.purchase-panel { display: block; width: 100%; height: auto; aspect-ratio: 16 / 11; }
.purchase-panel picture, .purchase-panel picture img { width: 100%; height: 100%; display: block; }
.purchase-panel picture img { object-fit: contain; }
.voucher-screen { display: grid; place-items: center; height: 100%; width: 100%; padding: 30px; background: #e9eae7; }
.voucher-screen img { display: block; height: 100%; max-height: 100%; width: auto; max-width: 90%; object-fit: contain; filter: drop-shadow(0 16px 28px #17231c26); }
.redemption-screen { display: grid; grid-template-columns: 190px minmax(0,1fr); height: 100%; width: 100%; color: #1d2923; background: #f5f5f2; font-family: var(--body); }
.redemption-sidebar { display: flex; flex-direction: column; padding: 35px 22px; gap: 15px; color: #a2b0a8; background: #19251f; font-size: 13px; }
.redemption-sidebar > strong { margin-bottom: 35px; color: #fff; font: 700 20px/1.2 var(--display); font-stretch: 100%; }
.redemption-sidebar > span { padding: 10px 13px; }
.redemption-sidebar .redemption-active { background: #2b3b32; color: #fff; border-radius: 7px; }
.redemption-sidebar small { margin-top: auto; font-size: 10px; color: #a2b0a8; }
.redemption-workspace { padding: 28px clamp(25px,5vw,80px); }
.redemption-topline { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #707c75; padding-bottom: 22px; border-bottom: 1px solid #dce2db; }
.redemption-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e4e8df; color: #52664f; font-size: 10px; }
.redemption-heading { margin: clamp(20px,4vw,65px) 0 22px; }
.redemption-heading p { font: 500 10px/1.4 var(--mono); color: #6b7a70; letter-spacing: .09em; margin-bottom: 10px; }
.redemption-heading h3 { color: #1d2923; font-size: clamp(24px,3vw,42px); font-stretch: 100%; font-weight: 600; letter-spacing: -.04em; }
.redemption-search { display: flex; justify-content: space-between; align-items: center; padding: 17px 19px; background: #fff; border: 1px solid #a1bba3; border-radius: 8px; color: #27382b; font: 500 19px/1 var(--mono); box-shadow: 0 0 0 3px #79a98412; }
.redemption-search-icon { font-size: 28px; color: #617c65; }
.redemption-result { margin-top: 22px; padding: 25px; border-radius: 10px; border: 1px solid #e0e4df; background: #fff; }
.redemption-result-head { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding-bottom: 22px; }
.redemption-result-head small { display: block; color: #738075; font-size: 11px; margin-bottom: 7px; }
.redemption-result-head strong { display: block; font: 500 17px/1 var(--mono); }
.redemption-result-head > span { padding: 6px 9px; border-radius: 99px; background: #e8f2e8; color: #376342; font-size: 10px; white-space: nowrap; }
.redemption-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.redemption-metrics > div { padding: 18px 14px; border: 1px solid #e6e9e4; border-radius: 7px; background: #f7f8f5; }
.redemption-metrics span { display: block; color: #6a776d; font-size: 10px; margin-bottom: 9px; }
.redemption-metrics strong { display: block; color: #24392a; font-size: clamp(23px,3vw,37px); font-weight: 600; line-height: 1; }
.redemption-metrics .redemption-balance { background: #eaf2e8; border-color: #d4e4d0; }
.redemption-history { display: flex; justify-content: space-between; margin-top: 22px; border-top: 1px solid #e6e9e4; padding-top: 17px; color: #6c776f; font-size: 11px; }
.redemption-history strong { color: #344e3c; font-weight: 500; }
.motif-section { padding-top: 66px; padding-bottom: 80px; background: #0d1014; }
.motif-head { display: block; margin-bottom: 35px; }
.motif-head .section-head { margin: 0 auto 26px; text-align: center; max-width: 850px; }
.motif-head .section-head p { max-width: 650px; margin-inline: auto; font-size: 16px; }
.motif-controls { justify-content: center; }
.motif-hint { text-align: center; font-size: 11px; }
.argument-section .section-head { margin-inline: auto; text-align: center; }
.argument-tabs { padding: 5px; gap: 5px; border-radius: 999px; background: #1a1e26; margin-bottom: 26px; }
.argument-tab { display: flex; align-items: center; justify-content: center; padding: 15px 12px; border: 0; border-radius: 999px; text-align: center; background: transparent; }
.argument-tab > span { display: none; }
.argument-tab > strong { font-size: 15px; font-weight: 500; }
.argument-tab[aria-selected="true"] { border: 0; box-shadow: none; background: #343c6f; color: #fff; }
.argument-tab:hover { border: 0; background: #252c39; color: #fff; }
.argument-panel { border: 1px solid #2e3544; border-radius: 16px; background: #151a24; padding: 34px; }
.argument-intro { max-width: none; text-align: center; }
.argument-intro h3 { margin-inline: auto; }
.case-summary { background: #20283a; border-color: #343f5e; }
.argument-next { display: none; }
.scenario-objections details { background: #1b2230; }
#angebot { background: #0a0e13; }
#angebot > .wrap > .section-head { max-width: 900px; margin: 0 auto 45px; text-align: center; }
#angebot .section-head::before { content: 'Angebot & Ablauf'; }
.offer { display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,.9fr); align-items: start; gap: 65px; }
.offer-content > h3 { font-size: 24px; margin-bottom: 23px; }
.offer-content .checklist { margin-bottom: 35px; }
.offer-content .checklist li { font-size: 15px; }
#aktion.offer-steps { padding: 29px 0 0; border-top: 1px solid #2b323e; margin: 0; background: none; list-style: none; display: grid; gap: 23px; scroll-margin-top: 95px; }
.offer-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 17px; align-items: start; }
.offer-step-number { width: 34px; height: 34px; border: 1px solid #3a4357; border-radius: 50%; display: grid; place-items: center; color: #aeb8ff; font: 400 11px/1 var(--mono); }
.offer-steps h3 { margin: 1px 0 5px; font-family: var(--body); font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.offer-steps p { color: var(--muted); font-size: 14px; }
.price-box { position: sticky; top: 95px; padding: 35px; }
.price .offer-amount { font: inherit; opacity: 1; margin: 0; }
.price-box .btn { font-size: 14px; width: 100%; padding-inline: 14px; }
#faq details[id] { scroll-margin-top: 92px; }
.faq-country-list { display: grid; gap: 22px; padding: 0 24px 24px; }
.faq-country > strong { display: block; color: var(--ink); font-size: 16px; font-weight: 600; }
.faq-country p { margin: 9px 0 0; padding: 0; font-size: 15px; line-height: 1.65; }
.faq-country .faq-source { display: inline-block; margin: 9px 14px 0 0; color: #aeb8c7; font-size: 12px; }
#faq .faq-common-note { margin: 0; padding: 0 24px 24px; font-size: 14px; }
@media (max-width: 980px) {
  .site-nav { gap: 15px; }
  .header-cta { font-size: 13px; padding-inline: 14px; }
  .brand-product { display: none; }
  .hero .btn { width: auto; }
  .offer { grid-template-columns: 1fr; gap: 35px; }
  .price-box { position: static; width: 100%; max-width: 620px; margin-inline: auto; }
  .redemption-screen { grid-template-columns: 150px minmax(0,1fr); }
  .redemption-sidebar { padding: 25px 15px; }
  .redemption-workspace { padding: 20px 28px; }
  .redemption-heading { margin-block: 22px; }
  .redemption-result { padding: 18px; }
}
@media (max-width: 720px) {
  .hero { padding: 40px 0 28px; }
  .hero h1 { font-size: clamp(32px,8.4vw,51px); margin-bottom: 22px; line-height: 1.07; }
  .hero-description { font-size: 15px; line-height: 1.65; max-width: 550px; margin-bottom: 24px; }
  .hero .actions { flex-direction: column; gap: 9px; }
  .hero .btn { width: auto; min-height: 44px; font-size: 12px; }
  .hero .btn-ghost { border: 0; min-height: 34px; }
  #ablauf.showcase { padding-bottom: 20px; }
  .showcase > .wrap { padding-inline: 14px; }
  .purchase-tabs { display: flex; flex-wrap: nowrap; justify-content: start; width: 100%; max-width: 100%; padding: 3px 0 10px; gap: 7px; margin: 0 0 10px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .purchase-tabs::-webkit-scrollbar { display: none; }
  .purchase-tab { flex: 0 0 auto; min-width: 0; min-height: 36px; padding: 9px 15px; font-size: 12px; scroll-snap-align: center; }
  .browser-frame { border-radius: 9px; }
  .browser-bar { height: 28px; padding-inline: 9px; gap: 5px; }
  .browser-dot { width: 6px; height: 6px; }
  .browser-address { width: 78%; font-size: 8px; margin-left: 4px; }
  .purchase-panel { aspect-ratio: 720 / 940; }
  .voucher-screen { padding: 20px; }
  .voucher-screen img { max-width: 100%; }
  .redemption-screen { display: block; overflow: hidden; }
  .redemption-sidebar { display: none; }
  .redemption-workspace { padding: 16px; }
  .redemption-topline { font-size: 10px; padding-bottom: 10px; }
  .redemption-avatar { width: 25px; height: 25px; font-size: 8px; }
  .redemption-heading { margin: 20px 0 16px; }
  .redemption-heading p { font-size: 8px; margin-bottom: 7px; }
  .redemption-heading h3 { font-size: 24px; }
  .redemption-search { padding: 11px 14px; font-size: 16px; }
  .redemption-search-icon { font-size: 23px; }
  .redemption-result { margin-top: 14px; padding: 15px; }
  .redemption-result-head { gap: 8px; padding-bottom: 15px; }
  .redemption-result-head small { font-size: 9px; margin-bottom: 5px; }
  .redemption-result-head strong { font-size: 12px; }
  .redemption-result-head > span { font-size: 8px; padding: 5px 6px; }
  .redemption-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
  .redemption-metrics > div { padding: 11px 8px; }
  .redemption-metrics span { min-height: 25px; font-size: 8px; margin-bottom: 7px; line-height: 1.5; }
  .redemption-metrics strong { font-size: 23px; }
  .redemption-history { margin-top: 15px; padding-top: 12px; font-size: 9px; }
  .motif-section { padding-block: 48px; }
  .motif-head .section-head p { font-size: 14px; }
  .argument-tabs { border-radius: 16px; grid-template-columns: 1fr; gap: 5px; margin-bottom: 18px; }
  .argument-tab { border-radius: 12px; padding: 14px 12px; }
  .argument-tab > strong { font-size: 14px; }
  .argument-panel { padding: 24px 20px; }
  .argument-panel .evidence-number { font-size: 29px; }
  .argument-panel .evidence-word { font-size: 25px; }
  .argument-intro h3 { font-size: 26px; }
  #angebot > .wrap > .section-head { margin-bottom: 30px; }
  .offer-content > h3 { font-size: 23px; }
  .offer-content .checklist li { font-size: 14px; }
  .offer-steps h3 { font-size: 17px; }
  .offer-steps p { font-size: 13px; }
  .price-box { padding: 27px; }
  .price { font-size: 52px; }
  .price-box .btn { font-size: 12px; }
  .gift-ribbon { margin-inline: -34px; }
}
@media (max-width: 360px) {
  .hero h1 { font-size: 28px; }
  .hero-description { font-size: 14px; }
  header .wrap { flex-wrap: nowrap; gap: 8px; padding-block: 0; }
  .brand-lockup { width: auto; }
  .header-actions { width: auto; margin-left: auto; }
  .brand { font-size: 16px; }
  .header-cta { font-size: 11px; padding-inline: 10px; }
  .redemption-workspace { padding: 12px; }
  .redemption-heading { margin-block: 14px; }
  .redemption-heading h3 { font-size: 21px; }
  .redemption-result { padding: 11px; }
}
/* A shared stage keeps all six views the same size, including portrait PDFs. */
.purchase-stage { position: relative; aspect-ratio: 16 / 11; height: auto; }
.purchase-panel { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.voucher-screen { overflow: hidden; }
@media (max-width: 720px) { .purchase-stage { aspect-ratio: 720 / 940; } }
.voucher-screen { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); }
.voucher-screen img { width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 100%; object-fit: contain; }
@media (min-width: 721px) {
  .hero { padding: 54px 0 30px; }
  .hero h1 { font-size: clamp(45px,5.7vw,68px); margin-bottom: 22px; }
  .hero-description { max-width: 840px; font-size: 18px; margin-bottom: 24px; }
}
/* Editorial pass: quieter product navigation, headline choices, one price block. */
main .section-head::before { display: none !important; content: none !important; }
.pos-copy > .eyebrow { display: none; }
.hero-tagline { max-width: none; margin: 0 auto 15px; color: var(--brand-blue-light); font-size: clamp(22px,2.6vw,32px); font-weight: 600; line-height: 1.25; }
.hero-description { max-width: 650px; margin: 0 auto 27px; font-size: 18px; }
.purchase-demo, .argument-module { padding: 17px; background: #13171d; border: 1px solid #2a303a; border-radius: 24px; }
.argument-module { padding: 30px; }
.preview-toolbar { display: grid; grid-template-columns: 42px minmax(0,1fr) 42px; gap: 16px; align-items: center; padding: 0 0 16px; }
.preview-arrow { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #353d48; border-radius: 50%; background: #1c222b; color: #e4e8ee; font: 400 23px/1 var(--body); cursor: pointer; }
.preview-arrow:hover { color: #fff; background: #303946; border-color: #647083; }
.purchase-tabs { margin: 0; padding: 0; flex-wrap: nowrap; justify-content: center; gap: 6px; min-width: 0; }
.purchase-tab { min-height: 37px; padding: 9px 17px; border: 0; color: #aab3c0; background: transparent; font-size: 12px; }
.purchase-tab:hover { background: #252c35; border: 0; }
.purchase-tab[aria-selected="true"] { background: #e4e8ee; color: #1b212b; border: 0; box-shadow: none; }
.preview-screen { overflow: hidden; border-radius: 14px; background: #eeefed; }
.purchase-stage { border-radius: inherit; }
.motif-section { padding-block: 80px; }
.motif-head .section-head { margin-bottom: 30px; }
.motif-head .section-head p { max-width: 640px; font-size: 17px; line-height: 1.6; }
.motif-gallery { position: relative; }
.motif-gallery .motif-rail { width: 100vw; margin: 0 calc(50% - 50vw); padding: 8px 0; grid-auto-columns: clamp(210px,24vw,285px); gap: 24px; }
.motif-gallery .motif-controls { position: absolute; z-index: 3; inset: 50% calc(50% - 50vw + 12px) auto; display: flex; justify-content: space-between; transform: translateY(-50%); pointer-events: none; margin: 0; }
.motif-gallery .motif-button { pointer-events: auto; color: #19202a; background: #f4f5f7; border: 1px solid #fff6; box-shadow: 0 5px 20px #0004; width: 46px; height: 46px; }
.motif-gallery .motif-button:hover { background: #fff; color: #19202a; border-color: #fff; }
.motif-gallery .motif-button:disabled { opacity: .28; }
.argument-section { background: #0d1014; padding-block: 90px; }
.argument-section .section-head { max-width: 950px; margin-bottom: 45px; }
.argument-section .section-head > p { margin-inline: auto; }
.argument-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 0; margin-bottom: 0; background: none; border-radius: 0; }
.argument-tab { display: inline-flex; position: relative; justify-content: center; align-items: center; text-align: center; min-height: 58px; padding: 16px 30px; color: #e0e5ed; border: 1px solid #495567; border-radius: 999px; background: #242d39; font: 500 19px/1.25 var(--body); box-shadow: inset 0 1px #ffffff06; transition: color .16s ease, background .16s ease, border-color .16s ease; }
.argument-tab > strong { display: block; font: inherit; letter-spacing: normal; }
.argument-tab:hover { border: 1px solid #9aa9c5; background: #354255; color: #fff; }
.argument-tab[aria-selected="true"] { border: 1px solid #f3f5f8; background: #f3f5f8; color: #18202b; box-shadow: 0 2px 9px #0002; }
.argument-tab:focus-visible { outline: 2px solid var(--brand-blue-light); outline-offset: 4px; }
.argument-panel { padding: 39px 0 0; border: 0; border-radius: 0; background: none; }
.argument-intro { max-width: 920px; margin: 0 auto 28px; text-align: center; }
.argument-intro h3 { max-width: 900px; margin: 0 auto 17px; font-size: clamp(26px,3.1vw,36px); }
.argument-intro p { max-width: 850px; margin: 0 auto; font-size: 18px; color: #bcc4d0; line-height: 1.65; }
.solution-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 13px 26px; margin: 0 0 30px; padding: 0; list-style: none; text-align: center; }
.solution-points li { color: #d3d9e3; font-size: 13px; }
.solution-points li::before { content: '✓'; color: #a5b2d1; padding-right: 9px; }
.argument-panel .evidence-grid { gap: 18px; }
.argument-panel .evidence-grid--two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.argument-panel .evidence-item, .argument-panel .evidence-item + .evidence-item { display: block; min-width: 0; padding: 27px; border: 1px solid #29323f; border-radius: 14px; background: #151b24; }
.argument-panel .evidence-number, .argument-panel .evidence-word { display: block; min-height: 0; margin: 0 0 19px; color: #c7d0ff; font-size: 50px; }
.argument-panel .evidence-word { font-size: 34px; min-height: 50px; }
.argument-panel .evidence-item h4 { margin-bottom: 9px; font: 600 18px/1.35 var(--body); letter-spacing: -.01em; }
.argument-panel .evidence-item > p { font-size: 15px; line-height: 1.6; color: #bac3d1; }
.argument-panel .evidence-item > .evidence-source { margin-top: 18px; font-size: 10px; line-height: 1.6; color: #939fae; }
.argument-cases { margin-top: 26px; padding-top: 26px; border-color: #29323f; }
.case-summary { padding: 25px; border-radius: 14px; background: #151b24; border-color: #29323f; }
.scenario-objections { margin-top: 26px; }
.scenario-objections details { background: #151b24; }
#angebot { background: #0b0f14; }
#angebot > .wrap { max-width: 1020px; }
#angebot > .wrap > .section-head { margin-bottom: 48px; }
#angebot .price-box { position: static; padding: 39px; border: 1px solid #343d4b; border-radius: 22px; background: #151b23; box-shadow: none; }
/* The seasonal offer, followed by a separate setup section. */
html:not([data-campaign="ended"]) #angebot .price-box {
  border: 2px solid transparent;
  background: radial-gradient(circle at 88% 0,rgba(97,159,144,.38),transparent 46%) padding-box,
    linear-gradient(145deg,#102B25,#0C1917 72%) padding-box,
    linear-gradient(90deg,#9A5B18 0%,#E2B967 28%,#B97120 50%,#F2D9A0 76%,#B16D20 100%) border-box;
}
#angebot .campaign-title { display: flex; align-items: center; justify-content: space-between; gap: 18px; font-size: 25px; line-height: 1.3; }
#angebot .campaign-title span { display: inline-block; margin: 0; font: 600 17px/1.3 var(--body); letter-spacing: 0; text-transform: none; }
#angebot .gift-ribbon { height: 6px; margin: 24px -39px 30px; }
#angebot .price-old s { text-decoration-color: #D9A350; text-decoration-thickness: 2px; }
html:not([data-campaign="ended"]) #angebot .price-inclusions { border-color: rgba(218,173,89,.23); }
.price-top { display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.price-old { margin: 0 0 12px; font-size: 18px; color: #c1ccc8; }
.price { font-size: 78px; font-stretch: 100%; }
.price > span:not(.offer-amount) { margin-top: 12px; color: #cbd5d0; font-size: 17px; font-weight: 400; opacity: 1; }
.price-action { max-width: 360px; text-align: center; }
.price-box .price-action .btn { width: 100%; min-height: 55px; padding: 16px 22px; font-size: 17px; line-height: 1.35; }
.price-action > p { margin-top: 13px; color: #c1ccc8; font-size: 15px; }
.price-deadline { margin: 22px 0 0; color: #e9d1a1; font-size: 16px; line-height: 1.5; }
#angebot .price-inclusions-title { margin: 32px 0 20px; font: 600 23px/1.3 var(--body); letter-spacing: -.02em; }
.price-inclusions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 28px; padding: 0; border: 0; }
.price-inclusions li { color: #e1e7e3; font-size: 17px; line-height: 1.5; padding-left: 29px; }
.price-inclusions li::before { width: 20px; height: 20px; top: 3px; background-size: 20px; }
.price-box .price-fee-note { margin: 24px 0 0; color: #c1ccc8; font-size: 16px; line-height: 1.5; }
#aktion.offer-steps { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin: 28px 0 0; padding: 24px 0; border: 0; border-top: 1px solid #ffffff26; border-bottom: 1px solid #ffffff26; }
.offer-steps li { grid-template-columns: 28px 1fr; gap: 11px; align-items: center; color: #e1e7e3; font-size: 16px; line-height: 1.4; }
.offer-step-number { width: 28px; height: 28px; color: #cbd5d0; border-color: #ffffff40; font: 500 14px/1 var(--body); }
#angebot .price-details { max-width: 850px; margin: 24px auto 0; border: 0; border-radius: 0; background: transparent; text-align: center; }
#angebot .price-details summary { padding: 0; color: #8d98a5; font-size: 16px; font-weight: 400; }
#angebot .price-details summary::after { color: inherit; }
.price-details-copy { display: grid; gap: 16px; padding-top: 20px; }
#angebot .price-details-copy p { margin: 0; padding: 0; color: #c1ccc8; font-size: 15px; line-height: 1.65; }
@media (max-width: 980px) {
  .preview-toolbar { gap: 8px; }
  .purchase-tab { padding-inline: 11px; font-size: 11px; }
}
@media (max-width: 720px) {
  .hero-tagline { font-size: 20px; max-width: 350px; margin-bottom: 15px; }
  .hero-description { max-width: 340px; font-size: 15px; margin-bottom: 23px; }
  .purchase-demo { padding: 10px; border-radius: 17px; }
  .argument-module { padding: 22px 16px; border-radius: 17px; }
  .preview-toolbar { grid-template-columns: 31px minmax(0,1fr) 31px; gap: 5px; padding-bottom: 10px; }
  .preview-arrow { width: 31px; height: 31px; font-size: 20px; }
  .purchase-tabs { justify-content: start; overflow-x: auto; width: 100%; padding: 0; margin: 0; gap: 3px; }
  .purchase-tab { min-height: 31px; padding: 8px 12px; font-size: 11px; }
  .preview-screen { border-radius: 10px; }
  .motif-section { padding-block: 55px; }
  .motif-head .section-head p { font-size: 15px; max-width: 340px; }
  .motif-gallery .motif-rail { grid-auto-columns: 220px; gap: 17px; }
  .motif-gallery .motif-controls { left: calc(50% - 50vw + 7px); right: calc(50% - 50vw + 7px); }
  .motif-gallery .motif-button { width: 39px; height: 39px; }
  .argument-section { padding-block: 60px; }
  .argument-section .section-head { margin-bottom: 30px; }
  .argument-tabs { display: grid; grid-template-columns: 1fr; gap: 10px; border-radius: 0; margin: 0; }
  .argument-tab { min-height: 50px; padding: 14px 22px; font-size: 17px; border-radius: 999px; }
  .argument-panel { padding: 29px 0 0; }
  .argument-intro { margin-bottom: 24px; }
  .argument-intro h3 { font-size: 26px; margin-bottom: 14px; }
  .argument-intro p { font-size: 16px; }
  .solution-points { display: grid; gap: 9px; margin-bottom: 23px; }
  .solution-points li { font-size: 12px; }
  .argument-panel .evidence-grid, .argument-panel .evidence-grid--two { grid-template-columns: 1fr; gap: 14px; }
  .argument-panel .evidence-item, .argument-panel .evidence-item + .evidence-item { padding: 23px; display: block; }
  .argument-panel .evidence-number, .argument-panel .evidence-word { font-size: 43px; min-height: 0; margin-bottom: 15px; }
  .argument-panel .evidence-word { font-size: 31px; }
  .argument-panel .evidence-item h4 { font-size: 17px; }
  .argument-panel .evidence-item > p { font-size: 14px; }
  .price-top { flex-direction: column; align-items: start; gap: 25px; }
  #angebot .price-box { padding: 26px; border-radius: 17px; }
  #angebot .campaign-title { flex-direction: column; align-items: start; gap: 10px; font-size: 23px; }
  #angebot .gift-ribbon { margin: 24px -26px; }
  .price { font-size: 66px; }
  .price > span:not(.offer-amount) { font-size: 16px; }
  .price-action { max-width: none; width: 100%; }
  .price-box .price-action .btn { font-size: 17px; }
  .price-inclusions { grid-template-columns: 1fr; gap: 16px; padding: 0; }
  .price-inclusions li { font-size: 16px; }
  #aktion.offer-steps { grid-template-columns: 1fr; gap: 17px; padding-block: 24px; }

}
.argument-panel .evidence-grid { display: grid; }
/* Hero: four clear benefits, compatibility, one live-demo action. */
.hero h1 { margin-bottom: 22px; }
.hero-tagline { margin-bottom: 25px; }
.hero-checks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 28px; max-width: 760px; margin: 0 auto 29px; list-style: none; padding: 0; text-align: left; }
.hero-checks li { position: relative; padding-left: 25px; color: #d4dae3; font-size: 16px; line-height: 1.5; }
.hero-checks li::before { content: ''; position: absolute; top: 0; left: 0; width: 20px; height: 20px; }
.hero-compatibility { margin: 0 auto 28px; max-width: 900px; }
.hero-compatibility > p { margin: 0 0 16px; color: #aeb8c7; font-size: 12px; line-height: 1.5; }
.platform-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 26px; color: #cbd1db; }
.platform-brand { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; min-height: 27px; }
.platform-brand img, .platform-social img { display: block; object-fit: contain; flex-shrink: 0; filter: brightness(0) invert(1); opacity: .7; }
.platform-brand > span { font-family: var(--body); font-size: 13px; font-weight: 500; color: #cbd1db; }
.platform-brand--wordpress > span { font-family: Georgia,serif; font-size: 16px; }
.platform-brand--squarespace > span { letter-spacing: .02em; font-size: 11px; text-transform: uppercase; }
.platform-social { display: inline-flex; align-items: center; gap: 18px; padding-left: 25px; border-left: 1px solid #343c48; }
.hero .actions { margin: 0; }
@media (max-width: 980px) {
  .platform-logos { gap: 16px 21px; }
  .hero-checks { max-width: 690px; gap: 11px 20px; }
  .hero-checks li { font-size: 14px; }
}
@media (max-width: 720px) {
  .hero-tagline { margin-bottom: 24px; }
  .hero-checks { grid-template-columns: 1fr; width: fit-content; max-width: 350px; margin-bottom: 26px; gap: 10px; }
  .hero-checks li { font-size: 14px; padding-left: 23px; }
  .hero-compatibility { max-width: 370px; margin-bottom: 25px; }
  .hero-compatibility > p { max-width: 310px; margin: 0 auto 17px; font-size: 11px; }
  .platform-logos { gap: 15px 19px; }
  .platform-brand > span { font-size: 11px; }
  .platform-brand--wordpress > span { font-size: 14px; }
  .platform-brand--squarespace > span { font-size: 9px; }
  .platform-brand--wordpress img, .platform-brand--squarespace img { width: 21px; height: 21px; }
  .platform-brand--wix img { width: 40px; height: 22px; }
  .platform-brand--jimdo img { width: 52px; height: 22px; }
  .platform-brand--ionos img { width: 52px; height: 22px; }
  .platform-brand--world4you img { width: 86px; height: 23px; }
  .platform-social { gap: 14px; padding-left: 17px; }
  .platform-social img { width: 21px; height: 21px; }
}
/* Four vertical points; the platform marks belong directly to the fourth. */
.hero { padding-top: 76px; padding-bottom: 24px; }
.hero h1 { margin-bottom: 18px; }
.hero-tagline { margin-bottom: 20px; }
.hero-checks { grid-template-columns: 1fr; gap: 9px; max-width: 820px; width: 100%; margin: 0 auto 23px; }
.hero-checks li { font-size: 16px; }
.hero-checks .hero-compatibility { max-width: none; margin: 0; }
.hero-platform-label { display: block; }
.hero-checks .platform-logos { justify-content: flex-start; gap: 14px 20px; margin-top: 13px; }
.hero-checks .platform-social { gap: 16px; padding-left: 19px; }
@media (max-width: 980px) {
  .hero-checks { max-width: 750px; }
  .hero-checks li { font-size: 15px; }
  .hero-checks .platform-logos { gap: 14px 17px; }
}
@media (max-width: 720px) {
  .hero { padding-top: 48px; padding-bottom: 21px; }
  .hero h1 { margin-bottom: 18px; }
  .hero-tagline { margin-bottom: 20px; }
  .hero-checks { max-width: 350px; gap: 10px; margin-bottom: 23px; }
  .hero-checks li { font-size: 14px; }
  .hero-checks .platform-logos { gap: 13px 17px; margin-top: 15px; }
  .hero-checks .platform-social { gap: 13px; padding-left: 15px; }
}
/* Center each benefit and give the demo action more breathing room. */
.hero-checks { text-align: center; margin-bottom: 48px; }
.hero-checks li { padding-left: 0; }
.hero-checks li::before { position: static; display: inline-block; vertical-align: -4px; margin-right: 9px; }
.hero-platform-label { display: inline; }
.hero-checks .platform-logos { justify-content: center; margin-top: 16px; }
.hero { padding-bottom: 60px; }
@media (max-width: 720px) {
  .hero-checks { margin-bottom: 38px; }
  .hero-checks .platform-logos { justify-content: center; margin-top: 17px; }
  .hero { padding-bottom: 46px; }
}
/* Three benefits in the site's body type; one consistent vector-arrow family. */
.hero-tagline { margin-bottom: 48px; }
.hero-checks { gap: 10px; }
.hero-checks li { font-family: var(--body); font-size: 17px; font-weight: 400; font-stretch: normal; letter-spacing: normal; line-height: 1.55; }
.hero .btn-primary { font-size: 16px; min-height: 52px; gap: 10px; }
.icon-arrow { display: inline-block; width: 1em; height: 1em; vertical-align: -.16em; flex-shrink: 0; }
.btn .icon-arrow { width: 20px; height: 20px; vertical-align: middle; }
.preview-arrow .icon-arrow, .motif-button .icon-arrow { width: 20px; height: 20px; }
.pos-link .icon-arrow, .direct-email .icon-arrow { width: 16px; height: 16px; }
@media (max-width: 720px) {
  .hero-tagline { margin-bottom: 40px; }
  .hero-checks li { font-size: 15px; }
  .hero .btn-primary { font-size: 14px; min-height: 48px; }
  .preview-arrow .icon-arrow { width: 18px; height: 18px; }
}
/* Stronger tab affordance and blue carousel controls over the content. */
/* A little more space between headings and the copy that follows them. */
.hero h1 { margin-bottom: 28px; }
.section-head h2:has(+ p), .trust h2:has(+ p), .pos-copy h2:has(+ p), .contact h2:has(+ p) { margin-bottom: 26px; }
.argument-intro h3 { margin-bottom: 24px; }
.argument-panel .evidence-item h4 { margin-bottom: 16px; }
.offer-steps h3 { margin-bottom: 12px; }
.case-summary h3:has(+ p) { margin-bottom: 18px; }
.preview-toolbar { grid-template-columns: minmax(0,1fr) 40px; gap: 16px; padding: 0 0 18px; }
.purchase-tabs { gap: 8px; }
.purchase-tab { min-height: 43px; padding: 11px 20px; border: 1px solid #495567; background: #242d39; color: #e0e5ed; font: 500 15px/1.2 var(--body); box-shadow: inset 0 1px #ffffff06; transition: color .16s ease, background .16s ease, border-color .16s ease; }
.purchase-tab:hover { border: 1px solid #9aa9c5; background: #354255; color: #fff; }
.purchase-tab[aria-selected="true"] { border: 1px solid #f3f5f8; background: #f3f5f8; color: #18202b; box-shadow: 0 2px 9px #0002; }
.preview-autoplay { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #495567; border-radius: 50%; color: #e0e5ed; background: #242d39; cursor: pointer; }
.preview-autoplay:hover { border-color: #9aa9c5; background: #354255; }
.preview-screen { position: relative; }
.preview-screen .preview-arrow { position: absolute; top: 50%; z-index: 5; transform: translateY(-50%); width: 48px; height: 48px; }
.preview-screen .preview-arrow[data-preview-direction="-1"] { left: 15px; }
.preview-screen .preview-arrow[data-preview-direction="1"] { right: 15px; }
.preview-screen .preview-arrow, .motif-gallery .motif-button { background: var(--brand-blue); color: #fff; border: 1px solid var(--brand-blue); box-shadow: 0 5px 18px #0004; }
.preview-screen .preview-arrow:hover, .motif-gallery .motif-button:hover { color: #fff; border-color: var(--brand-blue-light); background: var(--brand-blue-light); }
.preview-screen .preview-arrow .icon-arrow, .motif-gallery .motif-button .icon-arrow { width: 23px; height: 23px; stroke-width: 2; }
.motif-gallery .motif-button:disabled { opacity: .45; }
@media (max-width: 980px) {
  .purchase-tab { padding-inline: 15px; font-size: 14px; }
  .purchase-tabs { gap: 6px; }
}
@media (max-width: 720px) {
  .preview-toolbar { grid-template-columns: minmax(0,1fr) 34px; gap: 9px; padding-bottom: 13px; }
  .purchase-tabs { gap: 6px; padding: 1px 0; }
  .purchase-tab { min-height: 37px; padding: 10px 14px; font-size: 13px; }
  .preview-autoplay { width: 34px; height: 34px; }
  .preview-screen .preview-arrow { width: 37px; height: 37px; }
  .preview-screen .preview-arrow[data-preview-direction="-1"] { left: 9px; }
  .preview-screen .preview-arrow[data-preview-direction="1"] { right: 9px; }
  .preview-screen .preview-arrow .icon-arrow, .motif-gallery .motif-button .icon-arrow { width: 21px; height: 21px; }
}

/* Consistent introductory copy beneath section headings. */
.section-head > p,
.motif-head .section-head > p,
.trust h2 + p,
.pos-copy > p:not(.eyebrow),
.contact .intro,
.argument-intro > p { font-size: 19px; line-height: 1.65; }
@media (max-width: 720px) {
  .section-head > p,
  .motif-head .section-head > p,
  .trust h2 + p,
  .pos-copy > p:not(.eyebrow),
  .contact .intro,
  .argument-intro > p { font-size: 18px; }
}

/* A compact benefit row, followed by three clearly attributed sales examples. */
.selling-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 42px 0 50px; text-align: center; }
.selling-metric { padding: 0 20px; }
.selling-metric + .selling-metric { border-left: 1px solid #303845; }
.selling-metric > strong { display: block; margin-bottom: 16px; color: var(--brand-blue-light); font: 700 clamp(35px,4vw,50px)/1.1 var(--display); font-stretch: 100%; letter-spacing: -.04em; }
.selling-metric > p { color: #c2cbd8; font: 400 17px/1.5 var(--body); letter-spacing: normal; }
.selling-metric > p { margin: 0; }
.sales-examples { padding-top: 34px; border-top: 1px solid #2a303a; }
.sales-examples > h4 { margin: 0 0 28px; text-align: center; font: 600 25px/1.3 var(--body); letter-spacing: -.025em; }
.sales-example-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.sales-example { display: flex; flex-direction: column; min-width: 0; padding: 25px 22px; border: 1px solid #303845; border-radius: 14px; background: #191f29; }
.sales-example-number { display: block; margin-bottom: 22px; color: var(--brand-blue-light); font: 700 clamp(36px,4vw,48px)/1 var(--display); font-stretch: 100%; letter-spacing: -.04em; }
.sales-example > h5 { margin: 0 0 14px; color: #f3f5f8; font: 600 18px/1.35 var(--body); }
.sales-example > p { margin: 0 0 18px; color: #c2cbd8; font-size: 16px; line-height: 1.55; }
.sales-example-source { margin-top: auto; color: #aeb8c9; font-size: 13px; line-height: 1.5; text-underline-offset: 3px; }
.sales-example > small { display: block; margin-top: 9px; color: #a4afbf; font-size: 12px; line-height: 1.55; }
.sales-examples-note { max-width: 850px; margin: 22px auto 0; color: #a4afbf; text-align: center; font-size: 13px; line-height: 1.6; }
@media (max-width: 720px) {
  .selling-metrics { margin-block: 32px 38px; }
  .selling-metric { padding-inline: 8px; }
  .selling-metric > strong { margin-bottom: 12px; font-size: clamp(25px,7vw,32px); }
  .selling-metric > p { font-size: 17px; }
  .sales-examples { padding-top: 28px; }
  .sales-examples > h4 { font-size: 22px; }
  .sales-example-grid { grid-template-columns: 1fr; gap: 14px; }
  .sales-example { padding: 24px; }
  .sales-example > h5, .sales-example > p { min-height: 0; }
}

/* Compact integration callout with a same-size title and regular body text. */
a.argument-integration { display: grid; width: fit-content; max-width: min(100%,700px); grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 18px; margin: 72px auto 0; padding: 12px 20px; background: var(--shoperate-green); border-color: var(--shoperate-green); color: #fff; font: 400 17px/1.5 var(--body); }
a.argument-integration:hover { background: var(--shoperate-green-hover); border-color: var(--shoperate-green-hover); }
.argument-integration-icon { display: block; width: 40px; height: 45px; color: #fff; }
.argument-integration-copy { display: grid; gap: 6px; font: inherit; }
.argument-integration-copy > strong { color: inherit; font: inherit; font-weight: 600; }
.argument-integration-more { display: inline-flex; align-items: center; gap: 7px; font: inherit; text-decoration: underline; text-underline-offset: 3px; }
a.argument-integration:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.shoperate-lockup { background: var(--shoperate-green); border-color: var(--shoperate-green); box-shadow: 0 28px 70px rgba(0,159,86,.12); }
.shoperate-lockup:hover { background: var(--shoperate-green-hover); border-color: var(--shoperate-green-hover); }
@media (max-width: 720px) {
  a.argument-integration { grid-template-columns: 40px minmax(0,1fr); gap: 10px 14px; padding: 12px 16px; }
  .argument-integration-icon { width: 40px; height: 45px; align-self: start; }
  .argument-integration-more { grid-column: 2; justify-self: start; }
}

/* Reuse the first scenario's metric layout for every starting situation. */
.selling-metrics--details { margin-bottom: 28px; }
.metric-sources { max-width: 900px; margin: 0 auto 28px; color: #a4afbf; text-align: center; font-size: 12px; line-height: 1.65; }
.metric-sources p { margin: 0; }
.metric-sources p + p { margin-top: 8px; }
.metric-sources a { color: inherit; text-underline-offset: 3px; }
.campaign-context + .metric-sources { margin: 20px auto 0; }
@media (max-width: 720px) {
  .selling-metrics--details { grid-template-columns: 1fr; gap: 24px; }
  .selling-metrics--details .selling-metric { padding: 0; }
  .selling-metrics--details .selling-metric + .selling-metric { padding-top: 24px; border-left: 0; border-top: 1px solid #303845; }
  .selling-metrics--details .selling-metric > strong { font-size: 38px; }
  .selling-metrics--details .selling-metric > p { font-size: 17px; }
}

/* Match the portrait and shoperate artwork columns. */
.trust, .pos-card { grid-template-columns: 340px minmax(0,1fr); gap: 76px; }
.trust .portrait, .pos-card .shoperate-lockup { width: 100%; max-width: none; }
@media (max-width: 980px) {
  .trust, .pos-card { grid-template-columns: minmax(0,1fr); gap: 40px; }
  .trust .portrait, .pos-card .shoperate-lockup { width: min(100%,340px); max-width: 340px; justify-self: center; }
}

/* Offer copy and the separate three-step setup. */
#angebot .price-demand { margin: 20px 0 0; max-width: 820px; color: #d9e4df; font-size: 19px; line-height: 1.55; }
#angebot .price-demand-source { margin: 22px 0 0; color: #b4c2bd; font-size: 12px; line-height: 1.6; }
#angebot .price-demand-source a { color: inherit; text-underline-offset: 3px; }
#aktion.setup-section { padding: 88px 0; background: #0d1014; }
#aktion.setup-section .section-head { max-width: 960px; margin: 0 auto 42px; text-align: center; }
.setup-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; list-style: none; margin: 0; padding: 0; background: #13171d; border: 1px solid #2a303a; border-radius: 24px; overflow: hidden; }
.setup-step { min-width: 0; padding: 32px; }
.setup-step + .setup-step { border-left: 1px solid #2a303a; }
.setup-step-number { display: block; margin-bottom: 28px; color: var(--brand-blue-light); font: 700 clamp(35px,4vw,50px)/1.1 var(--display); font-stretch: 100%; letter-spacing: -.04em; }
.setup-step h3 { margin: 0 0 20px; color: var(--ink); font: 600 22px/1.3 var(--body); letter-spacing: -.02em; }
.setup-step p { margin: 0; color: #c2cbd8; font: 400 17px/1.55 var(--body); }
.setup-action { margin-top: 36px; text-align: center; }
.setup-action .btn { min-height: 55px; padding: 16px 24px; font-size: 17px; line-height: 1.35; }
.setup-action > p { margin-top: 13px; color: var(--muted); font-size: 15px; }
@media (max-width: 980px) {
  .setup-step { padding: 25px; }
  .setup-step h3 { font-size: 20px; }
}
@media (max-width: 720px) {
  #angebot .price-demand { font-size: 18px; }
  #aktion.setup-section { padding-block: 60px; }
  #aktion.setup-section .section-head { margin-bottom: 30px; }
  .setup-steps { grid-template-columns: 1fr; border-radius: 17px; }
  .setup-step { padding: 26px; }
  .setup-step + .setup-step { border-left: 0; border-top: 1px solid #2a303a; }
  .setup-step-number { margin-bottom: 22px; font-size: 38px; }
  .setup-action .btn { max-width: 100%; }
}

/* Center the offer and repeat the campaign banner's visual language. */
#angebot .price-box { text-align: center; }
#angebot .price-campaign { position: static; z-index: auto; margin: -39px -39px 0; padding: 24px; }
#angebot .price-campaign .campaign-bar-copy { max-width: 820px; margin-inline: auto; }
#angebot .price-campaign .campaign-bar-limit { font-size: 15px; line-height: 1.5; }
#angebot .price-reason { max-width: 760px; margin: 30px auto 0; }
#angebot .price-reason h3 { margin: 0; font: 600 23px/1.35 var(--body); letter-spacing: -.02em; }
#angebot .price-demand { margin: 18px auto 0; max-width: 730px; font-size: 18px; line-height: 1.55; }
#angebot .price-amount { margin-inline: auto; }
#angebot .price-inclusions { max-width: 760px; margin: 0 auto; gap: 14px 28px; text-align: center; }
#angebot .price-inclusions li { padding-left: 0; text-wrap: balance; }
#angebot .price-inclusions li { grid-column: 1 / -1; }
#angebot .price-terms-ref, #angebot .price-terms-ref:hover { color: #8d98a5; text-decoration: none; }
#preis-konditionen { scroll-margin-top: 100px; }
#angebot .price-inclusions li::before { position: static; display: inline-block; margin-right: 9px; vertical-align: -4px; }
#angebot .price-action { width: fit-content; max-width: 100%; margin: 38px auto 0; }
#angebot .price-action .btn { width: auto; max-width: 100%; }
#angebot .price-fee-note { margin-top: 20px; }
#angebot .price-details summary { justify-content: center; gap: 14px; }
#angebot .price-demand-source { margin: 18px auto 0; max-width: 850px; color: #b9c1cd; font-size: 12px; text-align: center; }
@media (max-width: 720px) {
  #angebot .price-campaign { margin: -26px -26px 0; padding: 22px 18px; }
  #angebot .price-campaign .campaign-bar-copy { gap: 10px; }
  #angebot .price-campaign .campaign-bar-limit { font-size: 14px; }
  #angebot .price-reason { margin-top: 26px; }
  #angebot .price-reason h3 { font-size: 21px; }
  #angebot .price-demand { font-size: 17px; }
}