@font-face {
      font-family: "Schibsted KD";
      src: url("assets/fonts/schibsted-grotesk-latin.woff2") format("woff2");
      font-weight: 400 900;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Roboto KD";
      src: url("assets/fonts/roboto-latin.woff2") format("woff2");
      font-weight: 100 900;
      font-style: normal;
      font-display: swap;
    }

    :root {
      --bg: #fff;
      --paper: #fff;
      --ink: #161616;
      --muted: #686868;
      --line: #d9d7d0;
      --soft: #eceae4;
      --dark: #101619;
      --accent: #e25d3f;
      --accent-deep: #b64234;
      --cta-from: #f58373;
      --cta-to: #e76a55;
      --cta-glow: 245, 131, 115;
      --trust: #0e766f;
      --warm: #f6f1e8;
      --blue: #1a0dab;
      --google-blue: #1a73e8;
      --krue-ink: #22272b;
      --krue-orange: #e25d3f;
      --m3c23: #3179ed;
      --radius-tight: 3px;
      --radius-field: 6px;
      --radius-card: 8px;
      --radius-panel: 10px;
      --radius-interface: 14px;
      --radius-device-outer: 30px;
      --radius-device-mid: 25px;
      --radius-device-inner: 23px;
      --radius-pill: 999px;
      --font-body: "Barlow", Arial, Helvetica, sans-serif;
      --font-ui: Arial, Helvetica, sans-serif;
      --font-heading: "Schibsted KD", Arial, Helvetica, sans-serif;
      --font-editorial-heading: "Barlow Condensed", "Schibsted KD", Arial, Helvetica, sans-serif;
      --font-editorial-kicker: "Barlow Semi Condensed", "Schibsted KD", Arial, Helvetica, sans-serif;
      /* Type scale: h1 is the largest, section titles (h2) sit clearly below it */
      --fs-h1: clamp(36px, 4.6vw, 56px);
      --fs-h2: clamp(28px, 3vw, 42px);
      --fs-h3: 22px;
      --fs-lead: 20px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: var(--font-body);
      line-height: 1.5;
    }

    header {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 10;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;
      padding: 24px clamp(24px, 4vw, 64px);
      background: transparent;
      border-bottom: 0;
      color: #fff;
      --krue-ink: #fff;
      --krue-mark-ink: #fff;
    }

    .brand-logo {
      --kd-cycle: 6s;
      --kd-logo-mark-size: 52px;
      --kd-logo-gap: 12px;
      --kd-logo-service-size: 7px;
      --kd-logo-service-leading: 9px;
      --kd-logo-service-gap: 2px;
      --kd-logo-brand-leading: 22px;
      --kd-logo-brand-height: calc(var(--kd-logo-brand-leading) * 2);
      --kd-logo-brand-size: 22px;
      --kd-logo-word-width: calc(var(--kd-logo-mark-size) * 2.9);
      display: inline-flex;
      align-items: center;
      width: calc(var(--kd-logo-mark-size) + var(--kd-logo-gap) + var(--kd-logo-word-width));
      min-width: calc(var(--kd-logo-mark-size) + var(--kd-logo-gap) + var(--kd-logo-word-width));
      color: var(--krue-ink);
    }

    .brand-logo-anim {
      position: relative;
      display: block;
      width: 100%;
      overflow: visible;
    }

    .brand-logo-lockup {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: var(--kd-logo-mark-size) minmax(0, 1fr);
      gap: var(--kd-logo-gap);
      align-items: center;
      overflow: visible;
    }

    .brand-logo-mark {
      position: relative;
      width: var(--kd-logo-mark-size);
      height: var(--kd-logo-mark-size);
      flex: 0 0 auto;
    }

    .brand-logo-block {
      position: absolute;
      left: calc(var(--x) * 1%);
      top: calc(var(--y) * 1%);
      width: calc(var(--w, 13) / 64 * 100%);
      height: calc(var(--h, 13) / 64 * 100%);
      border-radius: 8%;
      background: var(--krue-mark-ink, var(--krue-ink));
      opacity: 0;
      transform: translateX(-14px) scale(.35);
      transform-origin: center;
      will-change: transform, opacity;
    }

    .brand-logo-block.orange {
      background: var(--krue-orange);
    }

    .brand-logo-block.phase-1 {
      animation: kdLogoPhase1 var(--kd-cycle) both ease-out;
    }

    .brand-logo-block.phase-2 {
      animation: kdLogoPhase2 var(--kd-cycle) both ease-out;
    }

    .brand-logo-block.phase-3a {
      animation: kdLogoPhase3a var(--kd-cycle) both ease-out;
    }

    .brand-logo-block.phase-3b {
      animation: kdLogoPhase3b var(--kd-cycle) both ease-out;
    }

    .brand-logo-block.phase-4a {
      animation: kdLogoPhase4a var(--kd-cycle) both ease-out;
    }

    .brand-logo-block.phase-4b {
      animation: kdLogoPhase4b var(--kd-cycle) both ease-out;
    }

    .brand-logo-word {
      display: block;
      overflow: visible;
      animation: kdLogoWordRise var(--kd-cycle) both ease-out;
      will-change: transform, opacity;
    }

    .brand-logo-stack {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: var(--kd-logo-mark-size);
      overflow: visible;
    }

    .brand-logo-name {
      width: max-content;
      padding-top: 2px;
      color: currentColor;
      font-family: "DIN Alternate", "Arial Narrow", Arial, sans-serif;
      font-size: var(--kd-logo-brand-size);
      font-weight: 900;
      line-height: var(--kd-logo-brand-leading);
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .brand-logo-name span {
      display: block;
    }

    @keyframes kdLogoPhase1 {
      0%, 8% { opacity: 0; transform: translateX(-18px) scale(.35); }
      15%, 66%, 100% { opacity: 1; transform: translateX(0) scale(1); }
    }

    @keyframes kdLogoPhase2 {
      0%, 18% { opacity: 0; transform: translateX(-14px) scale(.35); }
      25%, 66%, 100% { opacity: 1; transform: translateX(0) scale(1); }
    }

    @keyframes kdLogoPhase3a {
      0%, 28% { opacity: 0; transform: translateX(-10px) scale(.35); }
      31.5%, 66%, 100% { opacity: 1; transform: translateX(0) scale(1); }
    }

    @keyframes kdLogoPhase3b {
      0%, 32% { opacity: 0; transform: translateX(-10px) scale(.35); }
      35.5%, 66%, 100% { opacity: 1; transform: translateX(0) scale(1); }
    }

    @keyframes kdLogoPhase4a {
      0%, 38% { opacity: 0; transform: translateX(-8px) scale(.35); }
      41.5%, 66%, 100% { opacity: 1; transform: translateX(0) scale(1); }
    }

    @keyframes kdLogoPhase4b {
      0%, 42% { opacity: 0; transform: translateX(-8px) scale(.35); }
      45.5%, 66%, 100% { opacity: 1; transform: translateX(0) scale(1); }
    }

    @keyframes kdLogoWordRise {
      0%, 16% { opacity: 0; transform: translateY(18px); }
      42%, 66%, 100% { opacity: 1; transform: translateY(0); }
    }

    nav {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 18px;
      font-size: 14px;
      font-weight: 700;
      color: #fff;
    }

    .nav-services {
      position: relative;
      display: inline-flex;
      align-items: center;
      padding-bottom: 14px;
      margin-bottom: -14px;
    }

    .nav-services-trigger {
      min-height: 32px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      cursor: pointer;
    }

    .nav-services-trigger svg {
      width: 14px;
      height: 14px;
      transition: transform .2s ease;
    }

    .nav-services-menu {
      position: absolute;
      top: calc(100% - 2px);
      left: -10px;
      min-width: 210px;
      display: grid;
      gap: 2px;
      padding: 8px;
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: var(--radius-panel);
      background: rgba(15, 21, 26, .98);
      box-shadow: 0 22px 58px rgba(0, 0, 0, .32);
      opacity: 0;
      pointer-events: none;
      transform: translateY(-4px);
      transition: opacity .18s ease, transform .18s ease;
      z-index: 30;
    }

    .nav-services:hover .nav-services-menu,
    .nav-services:focus-within .nav-services-menu,
    .nav-services.is-open .nav-services-menu {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .nav-services:hover .nav-services-trigger svg,
    .nav-services:focus-within .nav-services-trigger svg,
    .nav-services.is-open .nav-services-trigger svg {
      transform: rotate(180deg);
    }

    .nav-services-menu a {
      display: block;
      padding: 10px 12px;
      border-radius: var(--radius-field);
      white-space: nowrap;
    }

    .nav-services-menu a:hover,
    .nav-services-menu a:focus-visible,
    .nav-services-menu a[aria-current="page"],
    .nav-services.is-current .nav-services-trigger {
      background: rgba(255, 255, 255, .1);
    }

    .nav-toggle {
      display: none;
    }

    .nav-cta {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 22px;
      border-radius: var(--radius-pill);
      background: linear-gradient(135deg, var(--cta-from) 0%, var(--cta-to) 100%);
      color: #fff;
      box-shadow: 0 14px 30px rgba(var(--cta-glow), .24);
    }

    .nav-phone {
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      padding: 0 16px;
      border: 1px solid rgba(255, 255, 255, .42);
      border-radius: var(--radius-pill);
      background: rgba(255, 255, 255, .1);
      color: #fff;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    h1,
    h2,
    h3,
    .button,
    button,
    nav,
    .eyebrow {
      font-family: var(--font-heading);
    }

    h1,
    h2,
    h3,
    p {
      margin: 0;
    }

    h1 {
      max-width: 640px;
      font-size: var(--fs-h1);
      line-height: 1.02;
      letter-spacing: -.01em;
      font-weight: 800;
    }

    .keyword-split-title {
      max-width: 720px;
      display: grid;
      gap: 12px;
      letter-spacing: 0;
    }

    .hero-keyword-line {
      display: block;
      color: rgba(255, 255, 255, .86);
      font-family: var(--font-editorial-kicker);
      font-size: .86rem;
      font-weight: 800;
      line-height: 1.2;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .hero-human-line {
      display: block;
    }

    h2 {
      max-width: 760px;
      font-size: var(--fs-h2);
      line-height: 1.08;
      letter-spacing: -.01em;
      font-weight: 800;
    }

    h3 {
      font-size: var(--fs-h3);
      line-height: 1.15;
    }

    .eyebrow {
      display: block;
      margin-bottom: 16px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .section {
      max-width: 1240px;
      margin: 0 auto;
      padding: 86px 34px;
      border-bottom: 1px solid var(--line);
    }

    /* Logo-Wasserzeichen: grosse, sehr dezente Bildmarke im Hintergrund einer Sektion */
    .section--wm {
      position: relative;
      isolation: isolate;
      overflow: hidden;
    }

    .kd-watermark {
      position: absolute;
      z-index: -1;
      inset: 0;
      pointer-events: none;
      background: var(--krue-orange);
      opacity: .05;
      -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22black%22%3E%3Crect%20x%3D%2212.5%22%20y%3D%2212.5%22%20width%3D%2220.3%22%20height%3D%2276.6%22%20rx%3D%221.6%22%2F%3E%3Crect%20x%3D%2240.625%22%20y%3D%2212.5%22%20width%3D%2220.3%22%20height%3D%2220.3%22%20rx%3D%221.6%22%2F%3E%3Crect%20x%3D%2240.625%22%20y%3D%2240.625%22%20width%3D%2220.3%22%20height%3D%2220.3%22%20rx%3D%221.6%22%2F%3E%3Crect%20x%3D%2240.625%22%20y%3D%2268.75%22%20width%3D%2220.3%22%20height%3D%2220.3%22%20rx%3D%221.6%22%2F%3E%3Crect%20x%3D%2268.75%22%20y%3D%2212.5%22%20width%3D%2220.3%22%20height%3D%2220.3%22%20rx%3D%221.6%22%2F%3E%3Crect%20x%3D%2268.75%22%20y%3D%2268.75%22%20width%3D%2220.3%22%20height%3D%2220.3%22%20rx%3D%221.6%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
      mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22black%22%3E%3Crect%20x%3D%2212.5%22%20y%3D%2212.5%22%20width%3D%2220.3%22%20height%3D%2276.6%22%20rx%3D%221.6%22%2F%3E%3Crect%20x%3D%2240.625%22%20y%3D%2212.5%22%20width%3D%2220.3%22%20height%3D%2220.3%22%20rx%3D%221.6%22%2F%3E%3Crect%20x%3D%2240.625%22%20y%3D%2240.625%22%20width%3D%2220.3%22%20height%3D%2220.3%22%20rx%3D%221.6%22%2F%3E%3Crect%20x%3D%2240.625%22%20y%3D%2268.75%22%20width%3D%2220.3%22%20height%3D%2220.3%22%20rx%3D%221.6%22%2F%3E%3Crect%20x%3D%2268.75%22%20y%3D%2212.5%22%20width%3D%2220.3%22%20height%3D%2220.3%22%20rx%3D%221.6%22%2F%3E%3Crect%20x%3D%2268.75%22%20y%3D%2268.75%22%20width%3D%2220.3%22%20height%3D%2220.3%22%20rx%3D%221.6%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      /* feste Groesse, oben verankert: bleibt konsistent, egal wie hoch die Sektion ist */
      -webkit-mask-position: var(--wm-pos, right -100px top -120px);
      mask-position: var(--wm-pos, right -100px top -120px);
      -webkit-mask-size: var(--wm-size, 440px) auto;
      mask-size: var(--wm-size, 440px) auto;
    }

    .kd-watermark--left {
      --wm-pos: left -100px top -120px;
    }

    /* kleiner und an der Textseite, wenn hinter einem einzelnen Projekt */
    .project-showcase {
      position: relative;
      isolation: isolate;
    }

    .project-showcase .kd-watermark {
      --wm-size: 300px;
      --wm-pos: right -60px top -40px;
    }

    .project-showcase-reverse .kd-watermark {
      --wm-pos: left -60px top -40px;
    }

    /* Diffuser Farbverlauf: kleiner, weicher Punkt, mittig gehalten,
       damit der Verlauf nicht an einer Ecke des Containers anstoesst */
    .section--glow {
      position: relative;
      isolation: isolate;
      overflow: hidden;
    }

    .kd-glow {
      position: absolute;
      z-index: -1;
      inset: 0;
      pointer-events: none;
      /* zwei verschmolzene Punkte, leicht aussermittig: warmes Orange + kuehles Grau */
      background:
        radial-gradient(circle 420px at 44% 38%,
          rgba(226, 93, 63, .26) 0%,
          rgba(226, 93, 63, .08) 38%,
          transparent 64%),
        radial-gradient(circle 540px at 58% 56%,
          rgba(34, 39, 43, .13) 0%,
          rgba(34, 39, 43, .035) 46%,
          transparent 72%);
    }

    .lead {
      max-width: 620px;
      margin-top: 24px;
      color: #333;
      font-size: var(--fs-lead);
    }

    .button-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 30px;
    }

    .projekte .button-row {
      justify-content: center;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 22px;
      border: 1px solid transparent;
      border-radius: var(--radius-pill);
      background: linear-gradient(135deg, var(--cta-from) 0%, var(--cta-to) 100%);
      color: #fff;
      font-weight: 700;
      letter-spacing: 0;
      box-shadow: 0 16px 34px rgba(var(--cta-glow), .24);
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
    }

    .button:hover,
    .button:focus-visible {
      transform: translateY(-1px);
      box-shadow: 0 18px 42px rgba(var(--cta-glow), .32);
    }

    .button.secondary {
      background: transparent;
      color: inherit;
      border-color: rgba(22, 22, 22, .2);
      box-shadow: none;
    }

    .contact-rail {
      position: fixed;
      right: 18px;
      top: 50%;
      z-index: 30;
      display: grid;
      gap: 10px;
      transform: translateY(-50%);
      pointer-events: none;
    }

    .contact-rail-item {
      justify-self: end;
      width: 48px;
      min-height: 48px;
      display: grid;
      grid-template-columns: 24px max-content;
      align-items: center;
      gap: 10px;
      padding: 0 12px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: var(--radius-pill);
      background: rgba(17, 24, 29, .92);
      color: #fff;
      box-shadow: 0 18px 44px rgba(15, 23, 42, .22);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      pointer-events: auto;
      transition: width .22s ease, background .22s ease, transform .18s ease;
    }

    .contact-rail-item:hover,
    .contact-rail-item:focus-visible {
      width: 190px;
      background: #11181d;
      transform: translateX(-2px);
    }

    .contact-rail-primary {
      background: linear-gradient(135deg, var(--cta-from) 0%, var(--cta-to) 100%);
    }

    .contact-rail-primary:hover,
    .contact-rail-primary:focus-visible {
      background: linear-gradient(135deg, var(--cta-from) 0%, var(--cta-to) 100%);
    }

    .contact-rail-item svg {
      width: 22px;
      height: 22px;
    }

    .contact-rail-item span {
      white-space: nowrap;
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 700;
      opacity: 0;
      transition: opacity .16s ease;
    }

    .contact-rail-item:hover span,
    .contact-rail-item:focus-visible span {
      opacity: 1;
    }

    .hero {
      max-width: none;
      position: relative;
      z-index: 2;
      height: min(650px, calc(100vw * 830 / 1896));
      min-height: 460px;
      padding: 0;
      overflow: visible;
      background: #11181d url("assets/medienhafen-hero.webp") center / cover no-repeat;
      color: #fff;
      border-bottom: 0;
    }

    /* Hintergrund-Video: startet mit dem webp-Poster, uebernimmt sobald geladen */
    .hero-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border: 0;
      z-index: 0;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(90deg, rgba(17, 24, 29, .88) 0%, rgba(17, 24, 29, .72) 48%, rgba(17, 24, 29, .55) 100%);
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-video { display: none; }
    }

    .hero-inner {
      position: relative;
      z-index: 2;
      max-width: 1440px;
      min-height: 100%;
      height: 100%;
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(320px, 660px) 1fr;
      align-items: center;
      gap: 60px;
      padding: 118px 64px 112px;
    }

    .hero p,
    .hero .eyebrow {
      color: rgba(255, 255, 255, .86);
    }

    .hero .button {
      border-color: transparent;
      background: linear-gradient(135deg, var(--cta-from) 0%, var(--cta-to) 100%);
      color: #fff;
      box-shadow: 0 18px 42px rgba(var(--cta-glow), .28);
    }

    .hero .button:hover,
    .hero .button:focus-visible {
      box-shadow: 0 18px 42px rgba(var(--cta-glow), .34);
    }

    .hero .button.secondary {
      border-color: rgba(245, 131, 115, .88);
      background: rgba(245, 131, 115, .14);
      color: #fff;
      box-shadow: none;
      backdrop-filter: blur(10px);
    }

    .trust-badges {
      position: absolute;
      left: 50%;
      bottom: -18px;
      width: min(520px, calc(100% - 48px));
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      align-items: end;
      margin: 0;
      transform: translateX(-50%);
      z-index: 2;
    }

    .trust-badge {
      min-height: 68px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--ink);
      font-size: 13px;
    }

    .trust-badge img {
      display: block;
      width: auto;
      max-width: 100%;
      max-height: 76px;
      filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .16));
    }

    .trust-badge img.trust-badge-provenexpert {
      max-height: 88px;
    }

    .award-badge {
      width: 230px;
      min-height: 64px;
      display: grid;
      grid-template-columns: 72px 1fr;
      align-items: stretch;
      overflow: hidden;
      background: #fff;
      color: #8f784d;
      box-shadow: 0 12px 24px rgba(0, 0, 0, .14);
    }

    .award-badge-mark {
      display: grid;
      place-items: center;
      background: #bca271;
      color: #fff;
      font-size: 34px;
      font-weight: 900;
      letter-spacing: 0;
    }

    .award-badge-copy {
      display: grid;
      align-content: center;
      padding: 10px 12px;
      text-align: left;
      font-size: 12px;
      line-height: 1.05;
      text-transform: uppercase;
    }

    .award-badge-copy strong {
      display: block;
      color: #7c663d;
      font-size: 13px;
    }

    .award-badge-copy span {
      color: #a28a58;
    }

    .open-pain {
      max-width: none;
      position: relative;
      z-index: 1;
      padding-top: 132px;
      padding-bottom: 108px;
      overflow: hidden;
      scroll-margin-top: 86px;
      border-bottom: 0;
    }

    .serp-wrap {
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 34px;
    }

    .serp-head {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 52px;
      align-items: end;
      margin-bottom: 38px;
    }

    .serp-head h2 {
      font-size: var(--fs-h2);
    }

    .serp-scene {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 340px;
      gap: 28px;
      align-items: start;
    }

    .serp-window {
      border: 1px solid var(--line);
      background: #fff;
      box-shadow: 0 22px 70px rgba(16, 22, 25, .08);
      overflow: hidden;
    }

    .serp-topbar {
      display: grid;
      grid-template-columns: 92px 1fr 96px;
      gap: 18px;
      align-items: center;
      min-height: 74px;
      padding: 14px 22px;
      border-bottom: 1px solid var(--line);
    }

    .google-word {
      font-size: 24px;
      font-weight: 700;
      letter-spacing: -1px;
    }

    .google-word span:nth-child(1) { color: #4285f4; }
    .google-word span:nth-child(2) { color: #ea4335; }
    .google-word span:nth-child(3) { color: #fbbc05; }
    .google-word span:nth-child(4) { color: #4285f4; }
    .google-word span:nth-child(5) { color: #34a853; }
    .google-word span:nth-child(6) { color: #ea4335; }

    .search-pill {
      min-height: 46px;
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 14px;
      align-items: center;
      padding: 0 16px 0 20px;
      border: 1px solid #dfe1e5;
      border-radius: var(--radius-pill);
      box-shadow: 0 1px 6px rgba(32, 33, 36, .12);
      color: #202124;
      font-size: 15px;
    }

    .search-icon {
      color: #4285f4;
      font-weight: 700;
    }

    .serp-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }

    .serp-actions span {
      width: 28px;
      height: 28px;
      border-radius: var(--radius-pill);
      border: 1px solid #dadce0;
      background: #f8fafd;
    }

    .serp-tabs {
      display: flex;
      gap: 22px;
      padding: 0 0 0 132px;
      border-bottom: 1px solid #ebebeb;
      color: #5f6368;
      font-size: 14px;
    }

    .serp-tabs span {
      padding: 14px 0 12px;
    }

    .serp-tabs .active {
      color: #1a73e8;
      border-bottom: 3px solid #1a73e8;
    }

    .serp-body {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 260px;
      gap: 28px;
      padding: 18px 22px 28px 132px;
    }

    .result-count {
      margin-bottom: 18px;
      color: #70757a;
      font-size: 13px;
    }

    .ai-overview {
      margin-bottom: 22px;
      padding: 16px;
      border: 1px solid #e0e3e7;
      border-radius: var(--radius-interface);
      background: #f8fafd;
    }

    .ai-overview strong {
      display: block;
      margin-bottom: 8px;
      color: #202124;
      font-size: 15px;
    }

    .ai-line {
      height: 9px;
      margin-top: 8px;
      border-radius: var(--radius-pill);
      background: #dfe5ef;
    }

    .ai-line.short {
      width: 62%;
    }

    .search-result {
      position: relative;
      padding: 0 0 24px;
      margin-bottom: 22px;
      border-bottom: 1px solid #f1f3f4;
    }

    .search-result.featured {
      padding: 16px;
      border: 1px solid #d6e2ff;
      border-radius: var(--radius-interface);
      background: #f8fbff;
      box-shadow: 0 12px 34px rgba(26, 115, 232, .12);
    }

    .search-result.muted {
      opacity: .52;
    }

    .result-meta {
      display: grid;
      grid-template-columns: 28px 1fr auto;
      gap: 10px;
      align-items: center;
      margin-bottom: 8px;
    }

    .favicon {
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border-radius: var(--radius-pill);
      background: #f1f3f4;
      color: #5f6368;
      font-size: 11px;
      font-weight: 700;
    }

    .site-name {
      color: #202124;
      font-size: 14px;
    }

    .visible-url {
      color: #4d5156;
      font-size: 12px;
    }

    .result-menu {
      color: #5f6368;
      letter-spacing: 2px;
    }

    .result-title {
      margin-bottom: 6px;
      color: #1a0dab;
      font-size: 20px;
      line-height: 1.28;
      font-weight: 400;
    }

    .result-snippet {
      color: #4d5156;
      font-size: 14px;
      line-height: 1.48;
    }

    .stars {
      margin-top: 6px;
      color: #e37400;
      font-size: 13px;
    }

    .sitelinks {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px 16px;
      margin-top: 12px;
      color: #1a0dab;
      font-size: 14px;
    }

    .local-pack {
      padding: 14px;
      border: 1px solid #e0e3e7;
      border-radius: var(--radius-interface);
    }

    .map {
      height: 126px;
      margin-bottom: 12px;
      border-radius: var(--radius-panel);
      background:
        linear-gradient(90deg, transparent 48%, rgba(255,255,255,.65) 48% 52%, transparent 52%),
        linear-gradient(0deg, transparent 48%, rgba(255,255,255,.65) 48% 52%, transparent 52%),
        #dce7d6;
      position: relative;
      overflow: hidden;
    }

    .pin {
      position: absolute;
      width: 16px;
      height: 16px;
      border-radius: var(--radius-pill) var(--radius-pill) var(--radius-pill) 0;
      background: #ea4335;
      transform: rotate(-45deg);
    }

    .pin.one { left: 44%; top: 36%; }
    .pin.two { left: 64%; top: 58%; background: #4285f4; }

    .place {
      padding: 10px 0;
      border-top: 1px solid #eef0f2;
      font-size: 13px;
    }

    .place strong {
      display: block;
      color: #202124;
      font-size: 14px;
    }

    .serp-insights {
      display: grid;
      gap: 14px;
    }

    .insight-card {
      padding: 18px;
      border: 1px solid var(--line);
      background: var(--paper);
    }

    .insight-card.dark {
      background: var(--dark);
      color: #fff;
    }

    .insight-card.dark p {
      color: #d9dedf;
    }

    .insight-card small {
      display: block;
      margin-bottom: 8px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .insight-card.dark small {
      color: #d9dedf;
    }

    .insight-card p {
      margin-top: 10px;
      font-size: 18px;
    }

    .conversation-wrap {
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 34px;
    }

    .conversation-head {
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      gap: 52px;
      align-items: end;
      margin-bottom: 46px;
    }

    .conversation-head h2 {
      font-size: var(--fs-h2);
    }

    .conversation-stage {
      position: relative;
      min-height: 720px;
    }

    .browser-ghost {
      position: absolute;
      left: 50%;
      top: 80px;
      width: min(560px, 48vw);
      height: 430px;
      transform: translateX(-50%);
      border: 1px solid var(--line);
      background:
        linear-gradient(135deg, rgba(0,0,0,.045) 25%, transparent 25%) 0 0/22px 22px,
        #f8f7f3;
      color: var(--muted);
      display: grid;
      place-items: center;
      text-align: center;
      padding: 28px;
    }

    .browser-bar {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 42px;
      border-bottom: 1px solid var(--line);
      background: var(--paper);
      display: grid;
      grid-template-columns: 64px 1fr 88px;
      gap: 12px;
      align-items: center;
      padding: 0 12px;
      color: var(--muted);
      font-size: 12px;
      text-align: left;
    }

    .browser-dots {
      display: flex;
      gap: 5px;
    }

    .browser-dots span {
      width: 8px;
      height: 8px;
      border-radius: var(--radius-pill);
      background: var(--line);
    }

    .bubble {
      position: absolute;
      width: min(410px, 36vw);
      padding: 24px;
      border: 1px solid var(--line);
      background: var(--paper);
      box-shadow: 0 18px 44px rgba(16, 22, 25, .08);
    }

    .bubble::after {
      content: "";
      position: absolute;
      width: 18px;
      height: 18px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: var(--paper);
      transform: rotate(45deg);
    }

    .bubble.left::after {
      right: -10px;
      top: 38px;
    }

    .bubble.right::after {
      left: -10px;
      top: 38px;
      transform: rotate(225deg);
    }

    .bubble small {
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 12px;
      align-items: center;
      margin-bottom: 14px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .bubble-icon {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      background: var(--soft);
      color: var(--muted);
      font-size: 11px;
    }

    .bubble p {
      font-size: clamp(22px, 2.4vw, 34px);
      line-height: 1.08;
      font-weight: 700;
    }

    .bubble span {
      display: block;
      margin-top: 10px;
      color: var(--muted);
      font-size: .56em;
      font-weight: 400;
      line-height: 1.3;
    }

    .bubble.one {
      left: 0;
      top: 18px;
    }

    .bubble.two {
      right: 0;
      top: 160px;
    }

    .bubble.three {
      left: 70px;
      bottom: 86px;
    }

    .answer-strip {
      position: absolute;
      right: 0;
      bottom: 0;
      width: min(520px, 42vw);
      padding: 26px;
      background: var(--dark);
      color: #fff;
    }

    .answer-strip p {
      margin-top: 12px;
      color: #d9dedf;
      font-size: 18px;
    }

    .asset-belt {
      max-width: none;
      padding: 0;
      border-bottom: 0;
      background: var(--paper);
    }

    .asset-grid {
      display: grid;
      grid-template-columns: 1.1fr .9fr 1fr 1fr;
      grid-template-rows: 220px 220px;
      gap: 1px;
      background: var(--line);
    }

    .asset {
      display: grid;
      place-items: center;
      padding: 22px;
      background:
        linear-gradient(135deg, rgba(0,0,0,.045) 25%, transparent 25%) 0 0/22px 22px,
        #f8f7f3;
      color: var(--muted);
      text-align: center;
    }

    .asset.large {
      grid-row: span 2;
    }

    .asset.dark {
      background: var(--dark);
      color: #fff;
    }

    .story-turn {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: 70px;
      align-items: center;
    }

    .statement {
      font-size: clamp(28px, 3.5vw, 50px);
      line-height: 1.08;
      font-weight: 700;
    }

    .statement-copy {
      display: grid;
      gap: 20px;
      color: #333;
      font-size: 22px;
    }

    .service-nav {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin-top: 38px;
    }

    .service-card {
      min-height: 210px;
      padding: 26px;
      border: 1px solid var(--line);
      background: var(--paper);
    }

    .service-card .icon-slot,
    .icon-slot {
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      margin-bottom: 20px;
      border: 1px solid var(--line);
      background: var(--soft);
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .webdesign-flow,
    .apps-flow {
      display: grid;
      gap: 72px;
    }

    .split {
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      gap: 58px;
      align-items: center;
    }

    .mockup-stage {
      min-height: 430px;
      position: relative;
      display: grid;
      place-items: center;
      padding: 28px;
      border: 1px solid var(--line);
      background:
        linear-gradient(135deg, rgba(0,0,0,.045) 25%, transparent 25%) 0 0/22px 22px,
        #f8f7f3;
      color: var(--muted);
      text-align: center;
    }

    .mockup-stage.small {
      min-height: 260px;
    }

    .mockup-label {
      position: absolute;
      left: 18px;
      top: 18px;
      padding: 8px 10px;
      border: 1px solid var(--line);
      background: var(--paper);
      color: #333;
      font-size: 13px;
      text-align: left;
    }

    .icon-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 34px;
    }

    .icon-item {
      padding: 24px;
      border-top: 1px solid var(--line);
      background: transparent;
    }

    .icon-item p {
      margin-top: 10px;
      color: #333;
    }

    .client-proof {
      max-width: none;
      padding: 92px 34px 108px;
      background: #fff;
      text-align: center;
    }

    .client-proof-inner {
      max-width: 1320px;
      margin: 0 auto;
    }

    .client-proof-kicker {
      display: block;
      margin-bottom: 8px;
      color: #23272a;
      font-size: clamp(24px, 2.3vw, 34px);
      line-height: 1.2;
      letter-spacing: 0;
    }

    .client-proof h2 {
      max-width: none;
      margin: 0 auto;
      color: #11181d;
      font-size: var(--fs-h2);
      line-height: 1.08;
      letter-spacing: -.01em;
    }

    .client-logo-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 70px 86px;
      align-items: center;
      margin-top: 96px;
    }

    .client-logo-cell {
      min-height: 96px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .client-logo-cell img {
      display: block;
      width: auto;
      max-width: min(100%, 236px);
      max-height: 80px;
      object-fit: contain;
      filter: grayscale(1) saturate(0) contrast(.92);
      opacity: .68;
    }

    .client-logo-cell .logo-square {
      max-width: 118px;
      max-height: 118px;
    }

    .client-logo-cell .logo-tall {
      max-width: 118px;
      max-height: 118px;
    }

    .client-logo-cell .logo-wide {
      max-width: min(100%, 260px);
      max-height: 72px;
    }

    .client-logo-cell .logo-perixx {
      max-width: min(100%, 180px);
      max-height: 54px;
    }

    .logo-strip {
      display: grid;
      grid-template-columns: 1.1fr repeat(6, 1fr);
      gap: 1px;
      margin-top: 34px;
      background: var(--line);
      border: 1px solid var(--line);
    }

    .logo-strip > div {
      min-height: 92px;
      display: grid;
      place-items: center;
      padding: 16px;
      background: var(--paper);
      color: var(--muted);
      text-align: center;
      font-size: 14px;
    }

    .logo-strip .badge-cell {
      grid-template-columns: 36px 1fr;
      gap: 10px;
      text-align: left;
    }

    .mini-icon {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      background: var(--soft);
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
    }

    .case-row {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 28px;
      margin-top: 34px;
      align-items: stretch;
    }

    .case-list {
      display: grid;
      gap: 12px;
    }

    .case-list article {
      padding: 20px 0;
      border-bottom: 1px solid var(--line);
    }

    .process {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      margin-top: 34px;
      background: var(--line);
      border: 1px solid var(--line);
    }

    .process > div {
      min-height: 190px;
      padding: 24px;
      background: var(--paper);
    }

    .step-num {
      display: block;
      margin-bottom: 40px;
      color: var(--muted);
      font-size: 28px;
      font-weight: 700;
    }

    .dark-cta {
      max-width: none;
      background: var(--dark);
      color: #fff;
      border-bottom: 0;
    }

    .dark-cta .inner {
      max-width: 1240px;
      margin: 0 auto;
      padding: 92px 34px;
    }

    .dark-cta p {
      color: #d9dedf;
    }

    .app-map {
      display: grid;
      grid-template-columns: .9fr 1.2fr .9fr;
      gap: 18px;
      margin-top: 34px;
      align-items: stretch;
    }

    .app-map > div {
      min-height: 260px;
      padding: 24px;
      border: 1px solid var(--line);
      background: var(--paper);
    }

    .app-map .middle {
      display: grid;
      place-items: center;
      background:
        linear-gradient(135deg, rgba(0,0,0,.045) 25%, transparent 25%) 0 0/22px 22px,
        #f8f7f3;
      color: var(--muted);
      text-align: center;
    }

    .contact {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 46px;
      align-items: start;
    }

    form {
      display: grid;
      gap: 14px;
      padding: 26px;
      border: 1px solid var(--line);
      background: var(--paper);
    }

    input,
    select,
    textarea {
      width: 100%;
      margin-top: 6px;
      padding: 12px;
      border: 1px solid var(--line);
      font: inherit;
    }

    .contact-section {
      max-width: none;
      padding: clamp(72px, 8vw, 112px) clamp(20px, 6vw, 96px);
      background:
        linear-gradient(180deg, #fff 0%, #fff 62%, rgba(246, 241, 232, .5) 100%);
      border-bottom: 0;
    }

    .contact-head {
      max-width: 1320px;
      margin: 0 auto clamp(34px, 4vw, 54px);
    }

    .contact-head .lead {
      max-width: 620px;
      margin-top: 14px;
      color: #3a3a3a;
    }

    .contact-shell {
      max-width: 1320px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1fr) clamp(320px, 34%, 400px);
      gap: clamp(34px, 5vw, 70px);
      align-items: start;
    }

    .contact-intro {
      position: sticky;
      top: 96px;
      display: grid;
      gap: 24px;
    }

    .contact-intro .lead {
      max-width: 560px;
      color: #3a3a3a;
    }

    .contact-phone-card,
    .quote-card {
      max-width: 520px;
      padding: 24px;
      border: 1px solid rgba(34, 39, 43, .12);
      border-radius: var(--radius-panel);
      background: rgba(255, 255, 255, .74);
      box-shadow: 0 18px 46px rgba(16, 22, 25, .07);
    }

    .contact-phone-card {
      display: grid;
      gap: 3px;
      border-color: rgba(14, 118, 111, .22);
    }

    .contact-phone-label,
    .contact-phone-card span:last-child {
      color: var(--muted);
      font-size: 14px;
    }

    .contact-phone-card a {
      color: var(--trust);
      font-family: var(--font-heading);
      font-size: clamp(26px, 2.8vw, 38px);
      font-weight: 700;
      line-height: 1.05;
    }

    .quote-card {
      background: #11181d;
      color: #fff;
    }

    .quote-card h3 {
      margin-bottom: 10px;
      font-size: 24px;
    }

    .quote-card p {
      color: rgba(255, 255, 255, .76);
      font-size: 16px;
      line-height: 1.6;
    }

    .quote-card .button {
      margin-top: 20px;
      border-color: rgba(255, 255, 255, .42);
      color: #fff;
    }

    .contact-card {
      align-self: start;
      position: sticky;
      top: 96px;
      display: grid;
      gap: clamp(20px, 2.4vw, 28px);
      padding: clamp(24px, 3vw, 34px);
      border-radius: var(--radius-panel);
      background: #11181d;
      color: #fff;
      box-shadow: 0 26px 70px rgba(16, 22, 25, .16);
    }

    .contact-checklist {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 13px;
    }

    .contact-checklist li {
      position: relative;
      padding-left: 32px;
      font-size: 15px;
      line-height: 1.4;
      color: rgba(255, 255, 255, .9);
    }

    .contact-checklist li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 21px;
      height: 21px;
      background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='12'%20cy='12'%20r='12'%20fill='%23e25d3f'/%3E%3Cpath%20d='M7%2012.5l3%203%207-7'%20fill='none'%20stroke='white'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .contact-card-person {
      display: grid;
      justify-items: center;
      text-align: center;
      gap: 5px;
      padding-top: clamp(20px, 2.4vw, 26px);
      border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .contact-card-photo {
      width: 230px;
      height: 230px;
      max-width: 100%;
      border-radius: 50%;
      object-fit: cover;
      margin-bottom: 10px;
      border: 2px solid rgba(255, 255, 255, .2);
    }

    .contact-card-name {
      font-family: var(--font-heading);
      font-size: 19px;
      font-weight: 700;
    }

    .contact-card-role {
      color: rgba(255, 255, 255, .6);
      font-size: 14px;
    }

    .contact-card-quote {
      margin: 12px 0 2px;
      font-size: 16px;
      line-height: 1.5;
      color: rgba(255, 255, 255, .92);
      font-style: italic;
    }

    .contact-card-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-top: 10px;
    }

    .contact-card-actions .button.secondary {
      border-color: rgba(255, 255, 255, .42);
      color: #fff;
    }

    .contact-form {
      display: grid;
      gap: 18px;
      padding: clamp(24px, 4vw, 42px);
      border: 1px solid rgba(34, 39, 43, .12);
      border-radius: var(--radius-panel);
      background: #fff;
      box-shadow: 0 26px 70px rgba(16, 22, 25, .1);
    }

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

    .contact-form label {
      display: grid;
      gap: 7px;
      color: #22272b;
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 700;
    }

    .contact-form input,
    .contact-form select,
    .contact-form textarea {
      width: 100%;
      min-height: 50px;
      margin-top: 0;
      padding: 13px 14px;
      border: 1px solid #cfcac0;
      border-radius: var(--radius-field);
      background: #fbfaf7;
      color: #161616;
      font-family: var(--font-body);
      font-size: 16px;
      transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }

    .contact-form textarea {
      min-height: 156px;
      resize: vertical;
    }

    .contact-form input:focus,
    .contact-form select:focus,
    .contact-form textarea:focus {
      outline: none;
      border-color: var(--krue-orange);
      background: #fff;
      box-shadow: 0 0 0 4px rgba(226, 93, 63, .13);
    }

    .file-field {
      padding: 16px;
      border: 1px dashed #cfcac0;
      border-radius: var(--radius-card);
      background: #fbfaf7;
    }

    .file-field span {
      color: var(--muted);
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.45;
    }

    .consent-field {
      grid-template-columns: 20px 1fr;
      gap: 12px;
      align-items: start;
      color: #3a3a3a;
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5;
    }

    .consent-field input {
      min-height: 0;
      width: 18px;
      height: 18px;
      margin-top: 2px;
      accent-color: var(--krue-orange);
    }

    .consent-field a {
      color: var(--trust);
      font-weight: 700;
    }

    .form-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
      margin-top: 4px;
    }

    .form-actions .button {
      min-height: 52px;
    }

    .form-status {
      min-height: 1.5em;
      color: var(--trust);
      font-size: 15px;
      font-weight: 700;
    }

    .website-footer {
      max-width: none;
      padding: 82px clamp(24px, 6vw, 96px) 28px;
      background: #11181d;
      border-top: 0;
      color: #f8faf9;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.28fr) minmax(300px, .62fr);
      gap: clamp(28px, 4vw, 52px);
      max-width: 1320px;
      margin: 0 auto;
      padding-bottom: 56px;
      border-bottom: 1px solid rgba(255, 255, 255, .2);
      align-items: stretch;
    }

    .footer-info {
      display: grid;
      align-content: start;
      gap: 34px;
    }

    .footer-brand .brand-logo {
      --kd-logo-mark-size: 50px;
      --kd-logo-gap: 12px;
      --kd-logo-brand-leading: 21px;
      --kd-logo-brand-size: 21px;
      margin-bottom: 24px;
      --krue-ink: #fff;
      --krue-mark-ink: #fff;
    }

    .footer-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 18px;
      margin: 0;
      padding: 0;
      list-style: none;
      color: rgba(248, 250, 249, .72);
      font-size: 15px;
      line-height: 1.45;
    }

    .website-footer a {
      color: inherit;
      text-decoration: none;
    }

    .website-footer a:hover {
      color: var(--krue-orange);
    }

    .footer-contact-panel {
      display: grid;
      grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
      gap: 28px;
      padding-top: 28px;
      border-top: 1px solid rgba(255, 255, 255, .16);
    }

    .footer-contact-panel-wide {
      grid-template-columns: minmax(0, .95fr) minmax(0, 1fr) minmax(180px, .72fr);
    }

    .footer-title {
      margin: 0 0 14px;
      color: #fff;
      font-size: 17px;
      font-weight: 800;
      line-height: 1.25;
      letter-spacing: 0;
    }

    .footer-copy {
      margin: 0;
      color: rgba(248, 250, 249, .78);
      font-size: 16px;
      line-height: 1.6;
    }

    .footer-copy + .footer-copy {
      margin-top: 22px;
    }

    .footer-map-link {
      display: inline-flex;
      margin-top: 18px;
      color: #fff;
      font-weight: 700;
    }

    .footer-contact-list {
      display: grid;
      gap: 8px;
      margin: 0;
      font-size: 16px;
      line-height: 1.5;
    }

    .footer-region-list {
      display: grid;
      gap: 8px;
      color: rgba(248, 250, 249, .78);
      font-size: 16px;
      line-height: 1.5;
    }

    .footer-service-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(190px, .75fr);
      gap: 28px;
      align-items: start;
      padding-top: 28px;
      border-top: 1px solid rgba(255, 255, 255, .16);
    }

    .footer-service-list {
      display: grid;
      gap: 7px;
      margin: 0;
      padding-left: 20px;
      color: rgba(248, 250, 249, .78);
      font-size: 16px;
      line-height: 1.45;
    }

    .footer-badges {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 20px;
      margin-top: 0;
    }

    .footer-badges img {
      display: block;
      width: auto;
      object-fit: contain;
      filter: drop-shadow(0 14px 18px rgba(30, 38, 46, .12));
    }

    .footer-ionos {
      height: 108px;
      background: #fff;
      border-radius: 4px;
    }

    .footer-google {
      height: 58px;
    }

    .footer-google-ads {
      height: 72px;
    }

    .footer-map-card {
      min-height: 300px;
      align-self: start;
      border: 1px solid rgba(255, 255, 255, .18);
      background: rgba(255, 255, 255, .06);
      overflow: hidden;
    }

    .footer-map-card iframe {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 300px;
      border: 0;
      filter: grayscale(.15) contrast(.98);
    }

    .footer-bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 18px;
      max-width: 1320px;
      margin: 24px auto 0;
      color: rgba(248, 250, 249, .6);
      font-size: 14px;
    }

    .footer-legal {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
    }

    @media (max-width: 900px) {
      header {
        align-items: flex-start;
        gap: 14px;
        padding: 20px;
      }

      nav {
        justify-content: flex-end;
        gap: 12px;
        font-size: 13px;
      }

      .brand-logo {
        display: inline-flex;
        margin-bottom: 0;
      }

      nav a {
        display: inline-block;
        margin: 0;
      }

      .nav-cta {
        min-height: 38px;
        padding: 0 16px;
      }

      .nav-phone {
        min-height: 38px;
        padding: 0 14px;
      }

      .section,
      .dark-cta .inner {
        padding: 60px 20px;
      }

      .hero-inner,
      .serp-head,
      .serp-scene,
      .serp-body,
      .story-turn,
      .service-nav,
      .split,
      .icon-row,
      .case-row,
      .process,
      .app-map,
      .contact,
      .client-logo-grid,
      .logo-strip,
      .projekte-grid,
      .trust-badges {
        grid-template-columns: 1fr;
      }

      .hero,
      .hero-inner {
        height: auto;
        min-height: auto;
      }

      .hero-inner {
        padding: 150px 20px 118px;
      }

      .trust-badges {
        position: static;
        width: 100%;
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 32px;
        transform: none;
      }

      .trust-badge img {
        max-height: 76px;
      }

      .award-badge {
        width: min(100%, 230px);
      }

      .asset-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3, 180px);
      }

      .client-proof {
        padding: 70px 20px 78px;
      }

      .client-proof h2 {
        font-size: 34px;
      }

      .client-logo-grid {
        gap: 42px;
        margin-top: 58px;
      }

      .project-showcase,
      .project-showcase-reverse {
        grid-template-columns: 1fr;
      }

      .project-showcase-reverse .project-visual {
        order: 1;
      }

      .project-showcase-reverse .project-copy {
        order: 2;
      }

      .project-copy h3 {
        font-size: 27px;
      }

      .asset.large {
        grid-row: span 1;
      }

      .serp-topbar {
        grid-template-columns: 1fr;
      }

      .serp-tabs {
        padding-left: 18px;
        overflow-x: auto;
      }

      .serp-body {
        padding: 18px;
      }

      .website-footer {
        padding: 62px 20px 28px;
      }

      .footer-grid {
        grid-template-columns: 1fr;
        gap: 38px;
        padding-bottom: 48px;
      }

      .footer-contact-panel,
      .footer-service-row {
        grid-template-columns: 1fr;
      }

      .footer-map-card,
      .footer-map-card iframe {
        min-height: 260px;
      }

      .footer-title {
        margin-bottom: 16px;
      }

      .footer-map-link {
        margin-top: 22px;
      }

      .footer-badges {
        margin-top: 26px;
      }

      .contact-shell,
      .form-row {
        grid-template-columns: 1fr;
      }

      .contact-intro,
      .contact-card {
        position: static;
      }

      .google-word,
      .serp-actions {
        display: none;
      }
    }

    /* Final SERP story section */
    .ipad-mockup {
      position: relative;
      width: min(960px, 100%);
      margin: 0 auto;
      padding:
        clamp(4px, .45vw, 6px)
        clamp(3px, .4vw, 5px)
        clamp(5px, .6vw, 8px);
      border: 1px solid #aeb4bc;
      border-radius: clamp(32px, 4vw, 54px);
      background:
        linear-gradient(145deg, #eef1f5 0%, #cdd3da 32%, #f9fafb 58%, #aeb5be 100%);
      box-shadow:
        0 34px 90px rgba(15, 23, 42, .18),
        inset 0 1px 0 rgba(255, 255, 255, .96),
        inset 0 -2px 4px rgba(15, 23, 42, .18);
    }

    .ipad-mockup::before {
      content: "";
      position: absolute;
      inset: clamp(2px, .25vw, 3px);
      border-radius: clamp(27px, 3.5vw, 45px);
      border: 1px solid rgba(255, 255, 255, .55);
      pointer-events: none;
    }

    .ipad-side-button {
      position: absolute;
      z-index: 1;
      border-radius: var(--radius-pill);
      background: linear-gradient(180deg, #d7dce2, #89919a);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
      pointer-events: none;
    }

    .ipad-side-button.top {
      top: -4px;
      right: 18%;
      width: 92px;
      height: 5px;
    }

    .ipad-side-button.side {
      right: -4px;
      top: 26%;
      width: 5px;
      height: 86px;
    }

    .ipad-bezel {
      position: relative;
      padding:
        clamp(28px, 3.45vw, 44px)
        clamp(9px, 1.2vw, 16px)
        clamp(42px, 5vw, 64px);
      border-radius: clamp(25px, 3.1vw, 41px);
      background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .055), transparent 42%),
        #07090b;
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .08),
        inset 0 0 32px rgba(255, 255, 255, .035);
    }

    .ipad-camera {
      position: absolute;
      left: 50%;
      top: clamp(11px, 1.35vw, 17px);
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 35% 35%, #59687a 0 16%, #101b2a 17% 50%, #050607 52%);
      box-shadow: 0 0 0 2px #111318;
      transform: translateX(-50%);
      z-index: 2;
    }


    .ipad-screen {
      position: relative;
      overflow: hidden;
      border-radius: clamp(14px, 1.9vw, 25px);
      background: #fff;
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, .08),
        inset 0 0 0 1px rgba(15, 23, 42, .08);
    }

    .open-pain .serp-window {
      max-width: none;
      margin: 0;
      padding-top: 21px;
      border: 0;
      border-radius: 0;
      background: #fff;
      box-shadow: none;
      overflow: visible;
    }

    .open-pain .serp-topbar {
      display: grid;
      grid-template-columns: 92px 1fr 34px;
      gap: 16px;
      align-items: center;
      min-height: 72px;
      padding: 12px 20px;
      border-bottom: 1px solid #ebebeb;
    }

    .google-logo {
      width: 92px;
      height: 30px;
      display: block;
    }

    .open-pain .search-pill {
      min-height: 46px;
      display: grid;
      grid-template-columns: 1fr auto auto auto auto;
      gap: 13px;
      align-items: center;
      padding: 0 16px 0 20px;
      border: 1px solid #dfe1e5;
      border-radius: var(--radius-pill);
      box-shadow: 0 1px 5px rgba(32, 33, 36, .12);
      color: #202124;
      white-space: nowrap;
      overflow: hidden;
    }

    .query-text {
      display: flex;
      align-items: center;
      min-width: 0;
      max-width: none;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #202124;
      font-size: 22px;
      font-weight: 400;
      line-height: 26px;
      letter-spacing: 0;
    }

    .query-prefix {
      flex: 0 0 auto;
    }

    .query-cycle {
      width: 220px;
      height: 26px;
      margin-left: 4px;
      overflow: hidden;
      display: inline-block;
      vertical-align: bottom;
      position: relative;
    }

    .query-cycle-track {
      position: relative;
      display: block;
      height: 26px;
    }

    .query-cycle-track span {
      position: absolute;
      inset: 0 auto auto 0;
      height: 26px;
      line-height: 26px;
      opacity: 0;
      transform: translateY(72%);
      filter: blur(3px);
      animation: queryTerm 12.5s infinite ease-in-out;
      will-change: opacity, transform, filter;
    }

    .query-cycle-track span:nth-child(2) { animation-delay: 2.5s; }
    .query-cycle-track span:nth-child(3) { animation-delay: 5s; }
    .query-cycle-track span:nth-child(4) { animation-delay: 7.5s; }
    .query-cycle-track span:nth-child(5) { animation-delay: 10s; }

    @keyframes queryTerm {
      0% {
        opacity: 0;
        transform: translateY(72%);
        filter: blur(3px);
      }

      3%,
      17% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }

      20%,
      100% {
        opacity: 0;
        transform: translateY(-72%);
        filter: blur(3px);
      }
    }

    .search-tool {
      width: 22px;
      height: 22px;
      display: block;
      color: #474747;
      font-weight: 400;
    }

    .search-tool.search-icon {
      width: 20px;
      height: 20px;
      color: var(--google-blue);
    }

    .search-divider {
      width: 1px;
      height: 26px;
      background: #dadce0;
    }

    .profile-logo {
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      border: 1px solid #dadce0;
      border-radius: var(--radius-pill);
      background: #fff;
      position: relative;
      overflow: hidden;
    }

    .profile-mark {
      width: 23px;
      height: 23px;
      position: absolute;
      left: 4px;
      top: 4px;
    }

    .profile-block {
      position: absolute;
      left: calc(var(--x) * 1%);
      top: calc(var(--y) * 1%);
      width: calc(var(--w, 13) / 64 * 100%);
      height: calc(var(--h, 13) / 64 * 100%);
      border-radius: 1px;
      background: var(--krue-ink);
    }

    .profile-block.orange {
      background: var(--krue-orange);
    }

    .open-pain .serp-tabs {
      display: flex;
      flex-wrap: nowrap;
      gap: 22px;
      padding-left: 128px;
      border-bottom: 1px solid #ebebeb;
      color: #5f6368;
      font-size: 14px;
    }

    .open-pain .serp-tabs span {
      padding: 14px 0 12px;
    }

    .open-pain .serp-tabs .active {
      color: var(--google-blue);
      border-bottom: 3px solid var(--google-blue);
    }

    .serp-content {
      padding: 20px 42px 36px 128px;
    }

    .open-pain .ai-overview {
      margin-bottom: 28px;
      padding: 18px;
      border: 1px solid #e0e3e7;
      border-radius: var(--radius-card);
      background: #f8fafd;
    }

    .ai-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 10px;
    }

    .ai-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #202124;
      font-size: 15px;
      font-weight: 700;
    }

    .ai-sparkle {
      width: 24px;
      height: 24px;
      color: #3179ed;
    }

    .ai-head-actions {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex: 0 0 auto;
      color: #5f6368;
      font-size: 13px;
      font-weight: 700;
    }

    .ai-mini-sources {
      display: inline-flex;
      align-items: center;
      padding-left: 12px;
    }

    .ai-mini-source {
      width: 24px;
      height: 24px;
      display: inline-grid;
      place-items: center;
      margin-left: -8px;
      border: 2px solid #f8fafd;
      border-radius: var(--radius-pill);
      background: #fff;
      overflow: hidden;
      box-shadow: 0 1px 2px rgba(60, 64, 67, .15);
    }

    .ai-mini-source img {
      width: 16px;
      height: 16px;
      display: block;
    }

    .ai-mini-more {
      color: #3c4043;
      font-size: 13px;
      font-weight: 700;
    }

    .ai-menu {
      width: 18px;
      height: 18px;
      color: #5f6368;
    }

    .open-pain .ai-overview p {
      color: #3c4043;
      font-size: 15px;
      line-height: 1.5;
    }

    .open-pain .ai-overview p strong {
      display: inline;
      margin: 0;
      color: inherit;
      font-size: inherit;
      font-weight: 700;
    }

    .ai-sources {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
    }

    .source-chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 30px;
      padding: 4px 10px 4px 5px;
      border: 1px solid #dfe1e5;
      border-radius: var(--radius-pill);
      background: #fff;
      color: #5f6368;
      font-size: 12px;
    }

    .source-icon {
      width: 22px;
      height: 22px;
      display: inline-grid;
      place-items: center;
      border-radius: var(--radius-pill);
      background: #f1f3f4;
      color: #5f6368;
      line-height: 1;
      overflow: hidden;
    }

    .source-icon svg,
    .source-icon img {
      width: 16px;
      height: 16px;
      display: block;
    }

    .source-icon.globe {
      background: #f1f3f4;
      color: #5f6368;
      border: 1px solid #dfe1e5;
    }

    .source-icon.shield {
      background: #eef4ff;
      color: #1a73e8;
      border: 1px solid #d6e4ff;
    }

    .open-pain .result {
      display: grid;
      gap: 8px;
      padding-bottom: 24px;
      margin-bottom: 24px;
      border-bottom: 1px solid #f1f3f4;
    }

    .open-pain .result:last-of-type {
      padding-bottom: 0;
      margin-bottom: 0;
      border-bottom: 0;
    }

    .open-pain .result-meta {
      display: grid;
      grid-template-columns: 28px 1fr;
      gap: 10px;
      align-items: center;
      margin-bottom: 0;
    }

    .url-line {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .result-menu {
      width: 18px;
      height: 18px;
      flex: 0 0 auto;
      color: #5f6368;
      letter-spacing: 0;
    }

    .open-pain .result-title {
      max-width: 720px;
      margin: 0;
      color: var(--blue);
      font-size: 20px;
      line-height: 1.28;
      font-weight: 400;
      letter-spacing: 0;
    }

    .google-pagination {
      display: flex;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: flex-start;
      gap: 0;
      margin-top: 12px;
      padding: 10px 0 0;
      color: #1a73e8;
      font-family: var(--font-ui);
      font-size: 13px;
      line-height: 1;
    }

    .page-slot,
    .page-next-slot {
      display: grid;
      grid-template-rows: 40px 18px;
      justify-items: center;
      align-items: start;
      text-align: center;
      text-decoration: none;
    }

    .page-slot {
      width: 20px;
    }

    .page-g-slot {
      width: 28px;
    }

    .page-next-slot {
      width: 71px;
    }

    .nav-sprite {
      display: block;
      height: 40px;
      background: url("assets/nav_logo321.webp") no-repeat;
      background-size: 167px 410px;
    }

    .nav-g {
      width: 28px;
      background-position: -24px 0;
    }

    .nav-current {
      width: 20px;
      background-position: -53px 0;
    }

    .nav-o {
      width: 20px;
      background-position: -74px 0;
    }

    .nav-next {
      width: 71px;
      background-position: -96px 0;
    }

    .page-num {
      color: #1a73e8;
      font-size: 13px;
      line-height: 16px;
    }

    .page-num.active {
      color: #202124;
    }

    .page-next-label {
      color: #1a73e8;
      font-size: 13px;
      line-height: 16px;
      justify-self: end;
      padding-right: 2px;
      text-decoration: none;
    }

    @media (max-width: 760px) {
      .open-pain {
        scroll-margin-top: 138px;
      }

      .ipad-mockup {
        width: 100%;
        padding: 3px 2px 4px;
        border-radius: var(--radius-device-outer);
      }

      .ipad-mockup::before {
        inset: 1px;
        border-radius: var(--radius-device-mid);
      }

      .ipad-bezel {
        padding: 30px 8px 44px;
        border-radius: var(--radius-device-inner);
      }

      .ipad-camera {
        top: 11px;
        width: 6px;
        height: 6px;
      }

      .ipad-side-button.top {
        width: 54px;
        height: 4px;
      }

      .ipad-side-button.side {
        height: 52px;
        width: 4px;
      }

      .ipad-screen {
        border-radius: var(--radius-panel);
      }

      .open-pain .serp-window {
        width: 100%;
        padding-top: 12px;
      }

      .open-pain .serp-topbar {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 0;
        padding: 12px;
      }

      .google-logo,
      .profile-logo {
        display: none;
      }

      .open-pain .search-pill {
        min-height: 66px;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        padding: 8px 12px 8px 16px;
        white-space: normal;
      }

      .query-text {
        display: block;
        font-size: 19px;
        line-height: 23px;
      }

      .query-prefix {
        display: block;
      }

      .query-cycle {
        display: block;
        width: min(100%, 204px);
        height: 23px;
        margin-left: 0;
      }

      .query-cycle-track,
      .query-cycle-track span {
        height: 23px;
        line-height: 23px;
      }

      .search-divider,
      .search-tool:not(.search-icon) {
        display: none;
      }

      .search-tool.search-icon {
        width: 22px;
        height: 22px;
      }

      .open-pain .serp-tabs {
        gap: 20px;
        padding-left: 16px;
        padding-right: 16px;
        overflow-x: auto;
        scrollbar-width: none;
        font-size: 13px;
      }

      .open-pain .serp-tabs::-webkit-scrollbar {
        display: none;
      }

      .serp-content {
        padding: 16px 14px 22px;
      }

      .open-pain .ai-overview {
        margin-bottom: 24px;
        padding: 15px;
        border-radius: var(--radius-interface);
      }

      .ai-label {
        font-size: 14px;
      }

      .ai-head {
        gap: 10px;
        align-items: flex-start;
      }

      .ai-mini-source {
        width: 22px;
        height: 22px;
        margin-left: -9px;
      }

      .ai-mini-source img {
        width: 15px;
        height: 15px;
      }

      .ai-mini-more {
        font-size: 12px;
      }

      .ai-sparkle {
        width: 22px;
        height: 22px;
      }

      .open-pain .ai-overview p {
        font-size: 14px;
        line-height: 1.48;
      }

      .ai-sources {
        gap: 7px;
        margin-top: 13px;
      }

      .source-chip {
        min-height: 29px;
        padding-right: 9px;
        font-size: 12px;
      }

      .open-pain .result {
        gap: 9px;
        padding-bottom: 22px;
        margin-bottom: 22px;
      }

      .open-pain .result-title {
        max-width: none;
        font-size: 18px;
        line-height: 1.28;
      }

      .visible-url {
        max-width: calc(100vw - 112px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .google-pagination {
        transform: scale(.88);
        transform-origin: center top;
        margin-top: 8px;
        margin-bottom: -8px;
      }
    }

    @media (max-width: 390px) {
      .query-text {
        font-size: 17px;
        line-height: 21px;
      }

      .query-cycle {
        height: 21px;
      }

      .query-cycle-track,
      .query-cycle-track span {
        height: 21px;
        line-height: 21px;
      }

      .serp-content {
        padding-left: 12px;
        padding-right: 12px;
      }

      .open-pain .result-title {
        font-size: 17px;
      }

      .source-chip {
        font-size: 11px;
      }

      .google-pagination {
        transform: scale(.82);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .brand-logo-block,
      .brand-logo-word {
        animation: none !important;
      }

      .brand-logo-block,
      .brand-logo-word {
        opacity: 1;
        transform: none;
      }
    }
    /* ===== Trust-Strip (Siegel) ===== */
    .trust-strip {
      max-width: none;
      padding: clamp(38px, 4.6vw, 58px) 34px;
      background: #fff;
      border-bottom: 1px solid var(--line);
    }

    .trust-strip-inner {
      max-width: 1120px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: clamp(32px, 5.2vw, 76px);
    }

    .trust-strip-item {
      display: flex;
      align-items: center;
      gap: clamp(13px, 1.2vw, 18px);
    }

    .trust-strip-tile {
      flex: 0 0 auto;
      width: clamp(60px, 6vw, 76px);
      height: clamp(60px, 6vw, 76px);
      border-radius: var(--radius-card);
      background: linear-gradient(140deg, #f0795c 0%, #e25d3f 56%, #b64234 100%);
      display: grid;
      place-items: center;
      box-shadow: 0 10px 24px rgba(226, 93, 63, .26);
    }

    .trust-strip-tile img {
      display: block;
      width: 84%;
      height: 84%;
    }

    .trust-strip-text {
      font-family: "DIN Alternate", "Arial Narrow", Arial, sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      line-height: 1.05;
      letter-spacing: .005em;
      color: var(--ink);
      font-size: clamp(15px, 1.5vw, 19px);
    }

    .trust-strip-text span {
      display: block;
    }

    /* ===== Projekte ===== */
    .projekte-head {
      max-width: 780px;
    }

    .projekte-head .lead {
      max-width: 720px;
    }

    .project-showcase-list {
      display: grid;
      gap: 74px;
      margin-top: 56px;
    }

    .project-showcase {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
      gap: clamp(32px, 5vw, 72px);
      align-items: center;
    }

    .project-showcase-link {
      color: inherit;
      text-decoration: none;
      cursor: pointer;
      border-radius: var(--radius-panel);
      outline-offset: 10px;
    }

    .project-showcase-link:focus-visible {
      outline: 2px solid var(--krue-orange);
    }

    .project-showcase-link .project-copy h3,
    .project-showcase-link .mbp-mockup-wrapper {
      transition: color .18s ease, transform .18s ease, filter .18s ease;
    }

    .project-showcase-link:hover .project-copy h3,
    .project-showcase-link:focus-visible .project-copy h3 {
      color: var(--krue-orange);
    }

    .project-showcase-link:hover .mbp-mockup-wrapper,
    .project-showcase-link:focus-visible .mbp-mockup-wrapper {
      transform: translateY(-4px);
      filter: saturate(1.04);
    }

    .project-showcase-reverse {
      grid-template-columns: minmax(320px, .92fr) minmax(0, 1.08fr);
    }

    .project-kicker {
      display: block;
      color: var(--krue-orange);
      font-family: var(--font-editorial-kicker);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .project-copy h3 {
      margin: 14px 0 0;
      color: var(--ink);
      font-family: var(--font-editorial-heading);
      font-size: clamp(24px, 2vw, 30px);
      font-weight: 600;
      line-height: 1.06;
      letter-spacing: 0;
    }

    .project-copy p {
      max-width: 560px;
      margin: 24px 0 0;
      padding-left: 18px;
      border-left: 3px solid rgba(226, 93, 63, .9);
      color: #3f4142;
      font-size: 18px;
      line-height: 1.62;
    }

    .project-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 24px 0 0;
      padding: 0;
      list-style: none;
    }

    .project-tags li {
      font-size: .78rem; color: #4a4a4a;
      background: var(--soft); border-radius: var(--radius-pill); padding: 6px 12px;
    }

    .project-visual {
      min-width: 0;
    }

    .mbp-mockup-wrapper {
      width: 100%;
      min-width: 0;
      margin: 0;
      position: relative;
      display: flex;
    }

    .mbp-container {
      position: relative;
      width: 100%;
      min-width: 0;
      height: auto;
      padding-top: 58.6%;
      margin: 0 auto;
      box-sizing: border-box;
    }

    .mbp-display {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      display: block;
      width: 81.3%;
      height: 95.2%;
      margin: 0 auto;
      background-image: radial-gradient(#cfd0d1, #cfd0d1, #adadae);
      border: 1px solid #e5e7e9;
      border-radius: 3.1% / 4%;
      z-index: 1;
    }

    .mbp-display .display-edge {
      display: block;
      position: relative;
      width: 99.37%;
      height: 99.25%;
      margin: .3% auto;
      z-index: 2;
      background-color: #262626;
      border-radius: 2.75% / 3.8%;
    }

    .mbp-display .display-edge .bezel {
      display: block;
      position: relative;
      width: 99.5%;
      height: 99.2%;
      margin: auto;
      top: .4%;
      border-radius: 2.8% / 3.2%;
      z-index: 3;
      background-color: #010101;
    }

    .mbp-display .bezel:after {
      content: "";
      display: none;
      position: absolute;
      right: .15%;
      top: .3%;
      width: 62.5%;
      height: 100%;
      pointer-events: none;
      background: linear-gradient(55deg, rgba(0, 0, 0, 0) 61%, rgba(242, 245, 248, .15) 61%);
      background-blend-mode: screen;
      border-top-right-radius: 3.5% 3%;
    }

    .mbp-display.with-glare .bezel:after {
      display: block;
    }

    .mbp-display .display-camera {
      width: .62%;
      height: .95%;
      margin: 1% auto;
      left: 0;
      right: 0;
      position: absolute;
      border-radius: 50%;
      z-index: 5;
      background-color: #303132;
    }

    .mbp-display .display-frame {
      display: block;
      position: absolute;
      width: 97.65%;
      height: 89.5%;
      margin: 0 auto;
      top: 3.5%;
      left: 0;
      right: 0;
      background-color: #151515;
      overflow: hidden;
    }

    .project-screen-image {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }

    /* Software UI screenshots (e.g. PeriDesk): show the full width, not a center crop. */
    .project-screen-image--contain {
      object-fit: contain;
      object-position: top center;
      background: #fff;
    }

    .mbp-display .below-display {
      display: flex;
      justify-content: center;
      position: absolute;
      width: 100%;
      height: 4.9%;
      bottom: .15%;
      z-index: 3;
      background-color: #212121;
      border-bottom-right-radius: 2.5% 70%;
      border-bottom-left-radius: 2.5% 70%;
    }

    .mbp-display .macbookpro {
      display: block;
      position: relative;
      width: 7.4%;
      height: 32%;
      margin-top: .5%;
      border-radius: var(--radius-pill);
      background: rgba(216, 216, 218, .88);
    }

    .mbp-keyboard {
      width: 99.75%;
      height: 7.6%;
      margin: 0 auto;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 100;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .mbp-keyboard .front {
      width: 100%;
      height: 37.25%;
      position: absolute;
      margin: 0 auto;
      left: 0;
      right: 0;
      top: 0;
      background: linear-gradient(90deg, #68696b 0%, #757678 .15%, #a0a1a3 .3%, #cccdcf .5%, #e7e8ea .8%, #e8e9eb 1%, #dfe0e2 1.25%, #d1d2d4 1.5%, #adaeb0 2%, #a4a5a7 3%, #bbbdbf 4%, #e1e1e3 8%, #eaebed 15%, #e9eaec 25%, #e9eaec 75%, #eaebed 85%, #e1e1e3 92%, #bbbdbf 96%, #a4a5a7 97%, #adaeb0 98%, #d1d2d4 98.5%, #dfe0e2 98.75%, #e8e9eb 99%, #e7e8ea 99.2%, #cccdcf 99.5%, #a0a1a3 99.7%, #757678 99.85%, #68696b 100%);
      z-index: 100;
      border-radius: 1px;
      display: flex;
      justify-content: center;
      align-items: flex-start;
    }

    .mbp-keyboard .opener-left,
    .mbp-keyboard .opener-right {
      position: relative;
      width: 6.917%;
      height: 65.5%;
      z-index: 101;
      background-color: #c1c2c6;
      background-blend-mode: darken;
    }

    .mbp-keyboard .opener-left {
      border-radius: 0 0 0 var(--radius-device-inner);
      background-image: linear-gradient(180deg, rgba(195, 198, 200, .5) 0%, rgba(199, 200, 204, .5) 60%, rgba(115, 125, 130, .4) 100%), radial-gradient(circle at right, rgba(189, 190, 193, .5) 0%, rgba(189, 190, 193, .5) 50%, rgba(166, 169, 172, .5) 80%, rgba(30, 34, 40, .75) 100%);
    }

    .mbp-keyboard .opener-right {
      border-radius: 0 0 var(--radius-device-inner) 0;
      background-image: linear-gradient(180deg, rgba(195, 198, 200, .5) 0%, rgba(199, 200, 204, .5) 60%, rgba(115, 125, 130, .4) 100%), radial-gradient(circle at left, rgba(189, 190, 193, .5) 0%, rgba(189, 190, 193, .5) 50%, rgba(166, 169, 172, .5) 80%, rgba(30, 34, 40, .75) 100%);
    }

    .mbp-keyboard .bottom-left,
    .mbp-keyboard .bottom-right {
      display: block;
      position: relative;
      width: 50%;
      height: 58%;
      top: 10%;
      z-index: 99;
      background: linear-gradient(180deg, #e5e6e9 0%, #909193 65%, #4e4f51 90%, #323234 96%, #29292b 100%);
    }

    .mbp-keyboard .bottom-left {
      border-bottom-left-radius: 25% 60%;
    }

    .mbp-keyboard .bottom-right {
      border-bottom-right-radius: 25% 60%;
    }

    .mbp-shadow {
      width: 95%;
      height: 60%;
      display: flex;
      justify-content: center;
    }

    .mbp-shadow .shadow-left,
    .mbp-shadow .shadow-right {
      display: block;
      position: relative;
      width: 50%;
      height: 100%;
      top: 10%;
      z-index: 90;
      background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(8, 11, 17, .85) 2.5%, rgba(29, 32, 36, .4) 15%, rgba(255, 255, 255, 0) 50%);
      filter: blur(2px);
      background-blend-mode: multiply;
    }

    .mbp-shadow .shadow-left {
      border-top-left-radius: 20% 90%;
    }

    .mbp-shadow .shadow-right {
      border-top-right-radius: 20% 90%;
    }

    .project-software-screen {
      padding: 3.2%;
      background: #f7f7f4;
    }

    .software-topbar {
      display: flex;
      gap: 1.2%;
      height: 6%;
      align-items: center;
    }

    .software-topbar span {
      width: 2.5%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: #d8d5cd;
    }

    .software-layout {
      display: grid;
      grid-template-columns: 26% 1fr;
      gap: 3%;
      height: 88%;
      margin-top: 2%;
    }

    .software-layout aside {
      display: grid;
      align-content: start;
      gap: 7%;
      padding: 10%;
      background: #22272b;
      color: #fff;
      font-size: 10px;
    }

    .software-layout aside span {
      color: rgba(255, 255, 255, .68);
    }

    .software-main {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4%;
      align-content: start;
    }

    .software-main img {
      grid-column: 1 / -1;
      width: min(62%, 240px);
      margin: 3% 0 4%;
      padding: 4%;
      background: #fff;
      border: 1px solid #e4e1d8;
      box-sizing: border-box;
    }

    .software-card {
      min-height: 38px;
      background: #fff;
      border: 1px solid #e4e1d8;
      box-shadow: 0 12px 24px rgba(34, 39, 43, .07);
    }

    .software-card.wide {
      grid-column: 1 / -1;
      min-height: 52px;
    }

    .software-card.muted {
      background: #ebe8df;
    }

    .more-projects {
      margin-top: 58px;
      text-align: center;
    }

    .more-projects summary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 22px;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--ink);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      cursor: pointer;
      list-style: none;
      user-select: none;
    }

    .more-projects summary::-webkit-details-marker {
      display: none;
    }

    .more-projects summary:hover {
      border-color: var(--ink);
    }

    .more-projects .more-open {
      display: none;
    }

    .more-projects[open] .more-closed {
      display: none;
    }

    .more-projects[open] .more-open {
      display: inline;
    }

    .more-project-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 22px;
      margin-top: 34px;
      text-align: left;
    }

    .more-project {
      min-width: 0;
    }

    .more-project img {
      display: block;
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border: 1px solid var(--line);
      box-shadow: 0 16px 36px rgba(16, 22, 25, .07);
    }

    .more-project div {
      margin-top: 14px;
    }

    .more-project span {
      display: block;
      color: var(--krue-orange);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .more-project h3 {
      margin: 5px 0 0;
      color: var(--ink);
      font-size: 20px;
      line-height: 1.15;
    }

    @media (max-width: 900px) {
      .project-showcase,
      .project-showcase-reverse {
        grid-template-columns: 1fr;
      }

      .project-showcase-reverse .project-visual {
        order: 1;
      }

      .project-showcase-reverse .project-copy {
        order: 2;
      }

      .project-copy h3 {
        font-size: 27px;
      }

      .more-project-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 560px) {
      .project-showcase-list {
        gap: 54px;
      }

      .project-showcase {
        gap: 24px;
      }

      .project-copy h3 {
        font-size: 22px;
        line-height: 1.08;
      }

      .project-copy p {
        font-size: 16px;
      }

      .more-projects {
        margin-top: 44px;
      }

      .more-projects summary {
        width: 100%;
      }
    }

    /* ===== Ref-cards (homepage projekte + /referenzen/ shared component) ===== */
    .projekte-ref-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(24px, 3vw, 40px);
      margin-bottom: clamp(32px, 5vw, 48px);
    }

    .ref-card {
      display: flex;
      flex-direction: column;
    }

    .ref-card-link { text-decoration: none; color: inherit; display: block; }

    .ref-card-media {
      position: relative;
      aspect-ratio: 16 / 9;
      border-radius: var(--radius-card);
      overflow: hidden;
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: 0 18px 40px -28px rgba(16,22,25,.45);
      transition: transform .5s cubic-bezier(.16,.84,.44,1), box-shadow .5s ease;
    }
    .ref-card-media img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }
    .ref-card-link:hover .ref-card-media,
    .ref-card-link:focus-visible .ref-card-media {
      transform: translateY(-6px);
      box-shadow: 0 28px 60px -30px rgba(16,22,25,.5);
    }

    .ref-card-kicker {
      margin: 22px 0 8px;
      font-family: var(--font-heading);
      text-transform: uppercase; letter-spacing: .14em; font-size: .78rem;
      color: var(--muted);
    }
    .ref-card-title {
      font-family: var(--font-heading);
      font-weight: 700; line-height: 1.18; letter-spacing: -.01em;
      font-size: clamp(1.05rem, 1.4vw, 1.35rem); color: var(--ink); margin: 0;
    }

    .ref-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; }
    .ref-tags li {
      font-size: .78rem; color: #4a4a4a;
      background: var(--soft); border-radius: var(--radius-pill); padding: 6px 12px;
    }

    .ref-more {
      display: inline-flex; align-items: center; gap: 8px;
      margin-top: 18px;
      font-family: var(--font-heading);
      font-size: .92rem; color: var(--accent); font-weight: 700;
    }
    .ref-more svg { width: 16px; height: 16px; transition: transform .3s ease; }
    .ref-card-link:hover .ref-more svg,
    .ref-card-link:focus-visible .ref-more svg { transform: translateX(4px); }

    @media (max-width: 900px) {
      .projekte-ref-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 600px) {
      .projekte-ref-grid { grid-template-columns: 1fr; }
    }

    /* ===== Ablauf · Gantt (scroll-gepinnt) ===== */
    /* ===== Ablauf: statischer Projektplan mit Tab-Auswahl ===== */
    .ap {
      margin-top: 30px;
      border: 1px solid #cfccc3;
      background: #fff;
    }

    .ap-tabs {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
    }

    .ap-tab {
      padding: 11px 10px;
      border: 0;
      border-right: 1px solid #cfccc3;
      border-bottom: 1px solid #cfccc3;
      background: #f3f1ec;
      color: var(--krue-ink);
      font-family: var(--font-ui);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.2;
      text-align: center;
      cursor: pointer;
      transition: background .12s, color .12s;
    }

    .ap-tab:last-child { border-right: 0; }
    .ap-tab:hover { background: #e9e6df; }
    .ap-tab.on { background: var(--accent); color: #fff; border-bottom-color: var(--accent); }

    .ap-body {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .ap-gantt { padding: 16px 20px; border-right: 1px solid #cfccc3; }
    .ap-detail { padding: 16px 26px; }

    .ap-chart { display: flex; gap: 0; }
    .ap-names { width: 118px; flex: none; }
    .ap-plotwrap { flex: 1; }

    .ap-head {
      height: 22px;
      display: flex;
      align-items: center;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--muted);
      border-bottom: 1px solid #cfccc3;
    }
    .ap-names .ap-head { justify-content: flex-end; padding-right: 12px; }

    .ap-name {
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      text-align: right;
      padding-right: 12px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .03em;
      border-bottom: 1px solid #cfccc3;
      transition: color .3s;
    }
    .ap-name.active { color: var(--krue-ink); }

    .ap-arrow {
      height: 22px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 6px 0 12px;
      border-bottom: 1px solid #cfccc3;
    }
    .ap-arrow-lbl {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--muted);
      white-space: nowrap;
    }
    .ap-arrow-line { position: relative; flex: 1; height: 2px; background: var(--krue-ink); }
    .ap-arrow-line::after {
      content: "";
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      border-left: 9px solid var(--krue-ink);
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
    }

    .ap-plot {
      position: relative;
      height: 168px;
      border: 1px solid #cfccc3;
      border-top: 0;
      background:
        repeating-linear-gradient(180deg, transparent 0 27px, #cfccc3 27px 28px),
        repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), #cfccc3 calc(25% - 1px) 25%);
    }
    .ap-bar { position: absolute; height: 18px; border-radius: 2px; background: rgba(34, 39, 43, .13); transition: box-shadow .3s; }
    .ap-bar.active { box-shadow: 0 6px 16px rgba(16, 22, 25, .16); }
    .ap-fill { position: absolute; inset: 0; width: 0; border-radius: 2px; background: var(--accent); transition: width .4s ease; }

    .ap-no {
      display: block;
      margin-bottom: 8px;
      color: var(--accent);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    .ap-detail h3 {
      font-family: var(--font-heading);
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 23px;
      font-weight: 800;
      line-height: 1.1;
      margin: 0;
    }
    .ap-ic { width: 44px; height: 44px; flex: none; }
    .ap-detail p { margin: 12px 0 0; color: #333; font-size: 15.5px; line-height: 1.6; }

    @media (max-width: 760px) {
      .ap-body { grid-template-columns: 1fr; }
      .ap-gantt { border-right: 0; border-bottom: 1px solid #cfccc3; }
      .ap-tabs { grid-template-columns: repeat(3, 1fr); }
      .ap-tab:nth-child(3) { border-right: 0; }
    }

    /* ===== Zusätzliche Inhaltssektionen (Warum / Stimmen / Über / FAQ) ===== */
    .why {
      border-bottom: 0;
    }

    .why-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: 1fr;
      gap: 26px;
      margin-top: 38px;
    }

    .why-item {
      position: relative;
      display: flex;
      flex-direction: column;
      height: 100%;
      border: 1px solid var(--line);
      border-radius: var(--radius-card);
      overflow: hidden;
      background: var(--paper);
      box-shadow: 0 14px 34px rgba(16, 22, 25, .055);
    }

    .why-item::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 3px;
      background: var(--krue-orange);
      opacity: .9;
    }

    .why-pad {
      position: relative;
      display: flex;
      flex: 1;
      flex-direction: column;
      padding: 26px 30px 28px;
    }

    .why-num {
      position: absolute;
      top: 18px;
      right: 22px;
      z-index: 0;
      font-size: 64px;
      font-weight: 900;
      line-height: 1;
      color: rgba(226, 93, 63, .12);
    }

    .why-item h3 {
      position: relative;
      z-index: 1;
      margin: 0 0 10px;
      max-width: calc(100% - 62px);
      min-height: 2.15em;
      font-size: clamp(21px, 1.8vw, 26px);
      line-height: 1.12;
      font-weight: 700;
      letter-spacing: -.01em;
    }

    .why-item p {
      position: relative;
      z-index: 1;
      margin: 0;
      color: #3a3a3a;
      font-size: 15px;
      line-height: 1.66;
    }

    .why-item p strong {
      font-weight: 700;
      color: #161616;
    }

    .why-icon {
      position: relative;
      z-index: 1;
      float: right;
      width: 69px;
      height: 69px;
      margin: 4px -2px 8px 18px;
      object-fit: contain;
      shape-outside: circle(48%);
      shape-margin: 10px;
    }

    .testi-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      margin-top: 38px;
    }

    .testi {
      display: grid;
      gap: 16px;
      margin: 0;
      padding: 28px;
      border: 1px solid #e3e3e3;
      border-radius: 8px;
      background: var(--paper);
      box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08);
      font-family: "Roboto KD", Arial, Helvetica, sans-serif;
    }

    .testi-head {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .testi-avatar {
      display: grid;
      place-items: center;
      flex: 0 0 40px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      color: #fff;
      font-size: 18px;
      font-weight: 500;
      line-height: 1;
    }

    .testi-meta {
      display: grid;
      gap: 1px;
      line-height: 1.3;
    }

    .testi-name {
      font-style: normal;
      font-size: 16px;
      font-weight: 500;
      color: #1f1f1f;
    }

    .testi-date {
      font-size: 14px;
      color: #5e5e5e;
    }

    .testi-google {
      flex: 0 0 22px;
      width: 22px;
      height: 22px;
      margin-left: auto;
    }

    .testi-stars {
      display: flex;
      gap: 1px;
    }

    .testi-star {
      width: 17px;
      height: 17px;
      fill: #fbbc04;
    }

    .testi-text {
      margin: 0;
      color: #1f1f1f;
      font-size: 15px;
      line-height: 1.55;
    }

    .about-inner {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: 54px;
      align-items: start;
    }

    .about-copy {
      display: grid;
      gap: 18px;
      color: #333;
      font-size: 18px;
      line-height: 1.6;
    }

    .about-copy p {
      margin: 0;
    }

    .faq-list {
      margin-top: 34px;
      display: grid;
      gap: 10px;
    }

    .faq-item {
      border: 1px solid var(--line);
      border-radius: var(--radius-card);
      background: rgba(255, 255, 255, .72);
      box-shadow: 0 12px 30px rgba(16, 22, 25, .045);
    }

    .faq-item summary {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 32px;
      gap: 18px;
      align-items: center;
      min-height: 72px;
      padding: 18px 22px;
      cursor: pointer;
      list-style: none;
    }

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

    .faq-item h3 {
      margin: 0;
      font-size: 20px;
    }

    .faq-toggle {
      position: relative;
      width: 32px;
      height: 32px;
      border: 1px solid rgba(34, 39, 43, .14);
      border-radius: var(--radius-field);
      background: #fff;
    }

    .faq-toggle::before,
    .faq-toggle::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 13px;
      height: 2px;
      background: var(--krue-ink);
      transform: translate(-50%, -50%);
      transition: transform .18s ease;
    }

    .faq-toggle::after {
      transform: translate(-50%, -50%) rotate(90deg);
    }

    .faq-item[open] .faq-toggle::after {
      transform: translate(-50%, -50%) rotate(0deg);
    }

    .faq-answer {
      padding: 0 22px 22px;
    }

    .faq-item p {
      max-width: 860px;
      margin: 0;
      color: #333;
      font-size: 17px;
      line-height: 1.6;
    }

    .dark-cta .button {
      border-color: #fff;
      background: #fff;
      color: #151515;
    }

    @media (max-width: 900px) {
      .testi-grid,
      .about-inner {
        grid-template-columns: 1fr;
      }

      .why-list {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 560px) {
      .why-list {
        grid-template-columns: 1fr;
      }
    }

    /* ===== SERP-Scrollytelling: Schmerzpunkte -> KI-Uebersicht -> Statement ===== */
    .open-pain {
      padding: 0;
      overflow: visible;
    }

    .serp-scrolly {
      position: relative;
      height: 500vh;
    }

    .serp-sticky {
      position: sticky;
      top: 0;
      height: 100vh;
      display: grid;
      place-items: center;
      overflow: hidden;
      padding: clamp(6px, 1.2vh, 16px) 0;
    }

    /* iPad fuellt den Viewport: hoehengetrieben (Querformat) am Desktop,
       max-width laesst es am Handy ins Hochformat kippen */
    .serp-sticky .ipad-mockup {
      --serp-ar: 1.34;
      width: auto;
      height: min(94vh, 1000px);
      aspect-ratio: var(--serp-ar);
      max-width: 97vw;
      margin: 0;
      display: flex;
    }

    .serp-sticky .ipad-bezel {
      flex: 1;
      min-height: 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      padding: clamp(8px, 1vw, 14px);
    }

    .serp-sticky .ipad-camera {
      width: clamp(4px, .45vw, 6px);
      height: clamp(4px, .45vw, 6px);
      top: clamp(3px, .4vw, 5px);
    }

    .serp-sticky .ipad-screen {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    .open-pain .serp-window {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      padding-top: 0;
    }

    .open-pain .serp-topbar,
    .open-pain .serp-tabs {
      flex: 0 0 auto;
    }

    .serp-viewport {
      position: relative;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }

    /* Positionen/Opacity der Panels setzt JS pro Frame (lerp-geglaettet) */
    .serp-panel {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      opacity: 0;
      transform: translateX(110%);
      will-change: transform, opacity;
    }

    .serp-panel.is-questions {
      opacity: 1;
      transform: translateX(0);
    }

    /* --- Stage 1: Fragen --- */
    .serp-viewport .is-questions .serp-content {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: clamp(6px, 1.3vh, 16px);
      padding: clamp(8px, 1.8vh, 20px) clamp(18px, 4vw, 50px) clamp(8px, 1.8vh, 18px) clamp(18px, 4vw, 60px);
    }

    .serp-viewport .is-questions .result {
      margin: 0;
      padding: 0;
      border: 0;
      gap: clamp(3px, .7vh, 9px);
      opacity: 0;
      transform: translateY(20px);
      filter: blur(6px);
      transition: opacity .55s ease, transform .55s cubic-bezier(.4, 0, .2, 1), filter .55s ease;
    }

    .serp-viewport .is-questions .result.show {
      opacity: 1;
      transform: none;
      filter: none;
    }

    .serp-viewport .is-questions .result-title {
      margin: 0;
      max-width: none;
      font-family: var(--font-ui);
      font-size: clamp(16px, 2.7vh, 30px);
      line-height: 1.25;
    }

    .serp-viewport .is-questions .result-title strong {
      font-family: var(--font-ui);
    }

    .serp-viewport .is-questions .result-meta {
      grid-template-columns: 28px 1fr;
      gap: 10px;
    }

    .serp-viewport .is-questions .site-name {
      font-size: clamp(12px, 1.5vh, 16px);
    }

    .serp-viewport .is-questions .visible-url {
      font-size: clamp(11px, 1.3vh, 13px);
    }

    /* Paginierung als dauerhafter, klickbarer Footer der Google-Oberflaeche (alle Stages) */
    .serp-pagination {
      flex: 0 0 auto;
      margin-top: 0;
      padding: clamp(7px, 1.3vh, 14px) clamp(12px, 3vw, 32px) clamp(9px, 1.5vh, 16px);
      border-top: 1px solid #ebebeb;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: clamp(2px, .5vw, 6px);
      font-family: var(--font-ui);
    }

    .pg-slot {
      display: grid;
      grid-template-rows: clamp(22px, 2.6vh, 28px) clamp(15px, 1.8vh, 18px);
      justify-items: center;
      align-items: end;
    }

    .pg-slot.pg-page {
      padding: 0;
      border: 0;
      background: none;
      cursor: pointer;
      font: inherit;
    }

    .pg-g,
    .pg-gle {
      font-size: clamp(19px, 2.3vw, 26px);
      font-weight: 500;
      line-height: 1;
      letter-spacing: -.5px;
    }

    .pg-g { color: #4285f4; }
    .pg-bl { color: #4285f4; }
    .pg-gr { color: #34a853; }
    .pg-rd { color: #ea4335; }

    .pg-num {
      color: #1a73e8;
      font-size: clamp(12px, 1.5vh, 14px);
      line-height: 1;
    }

    .pg-slot.pg-page:hover .pg-num { text-decoration: underline; }

    /* aktuelle Seite (Stage) hervorheben */
    .serp-pagination[data-ostage="0"] .pg-page[data-go="0"] .pg-num,
    .serp-pagination[data-ostage="1"] .pg-page[data-go="1"] .pg-num,
    .serp-pagination[data-ostage="2"] .pg-page[data-go="2"] .pg-num {
      color: #202124;
      font-weight: 700;
    }

    /* Die o's in "Gooogle" als Stage-Indikator: aktuelles o rot, sonst gelb */
    .page-o {
      width: clamp(9px, 1vw, 11px);
      height: clamp(9px, 1vw, 11px);
      box-sizing: border-box;
      border: 2.8px solid #fbbc05;
      border-radius: 50%;
      align-self: end;
      margin-bottom: 1px;
      transition: border-color .45s ease;
    }

    .serp-pagination[data-ostage="0"] .page-o[data-o="1"],
    .serp-pagination[data-ostage="1"] .page-o[data-o="2"],
    .serp-pagination[data-ostage="2"] .page-o[data-o="3"] {
      border-color: #ea4335;
    }

    /* Zurueck / Weiter: Pfeil ueber Label, an der inneren Pfeilkante ausgerichtet */
    .pg-edge {
      display: grid;
      grid-template-rows: clamp(22px, 2.6vh, 28px) clamp(15px, 1.8vh, 18px);
      align-items: center;
      padding: 0 clamp(4px, 1vw, 10px);
      border: 0;
      background: none;
      cursor: pointer;
      color: #1a73e8;
      font: inherit;
      font-size: clamp(12px, 1.5vh, 14px);
    }

    .pg-prev { justify-items: end; }
    .pg-next { justify-items: start; }

    .pg-chevron {
      width: clamp(15px, 1.8vw, 21px);
      height: clamp(15px, 1.8vw, 21px);
      display: block;
    }

    .pg-edge:hover .pg-label { text-decoration: underline; }

    /* --- Stage 2: KI-Uebersicht (gross) --- */
    .serp-viewport .is-overview .serp-content--overview {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: clamp(16px, 3vh, 40px) clamp(22px, 5vw, 70px);
    }

    .serp-viewport .is-overview .ai-overview {
      margin: 0;
      padding: clamp(18px, 2.4vw, 32px);
      border-radius: clamp(14px, 1.4vw, 22px);
    }

    .serp-viewport .is-overview .ai-label {
      font-size: clamp(15px, 1.5vw, 22px);
    }

    .serp-viewport .is-overview .ai-sparkle {
      width: clamp(22px, 2vw, 30px);
      height: clamp(22px, 2vw, 30px);
    }

    .serp-viewport .is-overview .ai-overview p {
      font-size: clamp(15px, 2vh, 26px);
      line-height: 1.5;
    }

    .serp-viewport .is-overview .ai-sources {
      gap: 10px;
      margin-top: clamp(12px, 1.8vh, 20px);
    }

    .serp-viewport .is-overview .source-chip {
      min-height: clamp(30px, 3vh, 38px);
      font-size: clamp(12px, 1.1vw, 15px);
    }

    /* --- Stage 3: Statement (zentral) --- */
    .is-statement .stmt-inner {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: clamp(14px, 2.4vh, 30px);
      padding: clamp(20px, 4vh, 48px) clamp(24px, 6vw, 80px);
    }

    .stmt-mark {
      position: relative;
      flex: none;
      width: clamp(40px, 5vw, 64px);
      height: clamp(40px, 5vw, 64px);
    }

    .stmt-eyebrow {
      margin: 0;
      color: var(--krue-ink);
      font-family: var(--font-editorial-kicker);
      font-size: clamp(14px, 2vh, 22px);
      font-weight: 600;
      opacity: .82;
    }

    .stmt-hero {
      margin: 0;
      max-width: min(92%, 20em);
      color: var(--krue-ink);
      font-family: var(--font-editorial-heading);
      font-size: clamp(24px, 4.4vh, 48px);
      font-weight: 700;
      line-height: 1.16;
      letter-spacing: -.01em;
    }

    .is-statement .stmt-result {
      display: none;
    }

    .serp-viewport.with-result .is-statement .stmt-result {
      display: grid;
      width: min(440px, 92%);
      margin: clamp(6px, 1.6vh, 18px) auto 0;
      padding: 14px 18px;
      text-align: left;
      border: 1px solid #e6e8eb;
      border-radius: var(--radius-interface);
      background: #fff;
      box-shadow: 0 1px 4px rgba(16, 22, 25, .06);
    }

    .stmt-result .stmt-rank {
      background: var(--krue-orange);
      color: #fff;
    }

    .stmt-open {
      margin-top: 2px;
      color: #188038;
      font-size: clamp(12px, 1vw, 14px);
      font-weight: 500;
    }

    .is-statement .reveal {
      opacity: 0;
      transform: translateY(16px);
      filter: blur(6px);
      transition: opacity .6s ease, transform .6s cubic-bezier(.4, 0, .2, 1), filter .6s ease;
    }

    .is-statement.on .reveal {
      opacity: 1;
      transform: none;
      filter: none;
    }

    .is-statement.on .stmt-mark { transition-delay: .05s; }
    .is-statement.on .stmt-eyebrow { transition-delay: .16s; }
    .is-statement.on .stmt-hero { transition-delay: .30s; }
    .is-statement.on .stmt-result { transition-delay: .46s; }

    /* --- Handy: Hochformat, weniger Rand --- */
    @media (max-width: 760px) {
      .serp-sticky {
        padding: clamp(4px, 1vh, 12px) 0;
      }

      .serp-sticky .ipad-mockup {
        --serp-ar: .64;
        height: min(95vh, 880px);
        max-width: 98vw;
      }

      .serp-sticky .ipad-bezel {
        padding: clamp(7px, 2vw, 12px);
      }

      .serp-viewport .is-questions .result-title {
        font-size: clamp(16px, 4.4vw, 23px);
      }

      .serp-viewport .is-overview .ai-overview p {
        font-size: clamp(15px, 4vw, 21px);
      }

      .stmt-hero {
        font-size: clamp(23px, 6.6vw, 34px);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .serp-panel,
      .serp-viewport .is-questions .result,
      .is-statement .reveal {
        transition: none;
      }
    }

    /* ===== Handy: Navigation als "Menue"-Button + niedrigerer Hero ===== */
    @media (max-width: 760px) {
      .nav-toggle {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        min-height: 42px;
        padding: 0 15px;
        border: 1px solid rgba(255, 255, 255, .55);
        border-radius: var(--radius-pill);
        background: rgba(255, 255, 255, .12);
        color: #fff;
        font: 700 14px/1 Arial, Helvetica, sans-serif;
        cursor: pointer;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
      }

      .nav-toggle-icon {
        display: inline-grid;
        gap: 3px;
        width: 18px;
      }

      .nav-toggle-icon span {
        display: block;
        height: 2px;
        border-radius: 2px;
        background: #fff;
        transition: transform .25s ease, opacity .2s ease;
      }

      header.nav-open .nav-toggle-icon span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
      header.nav-open .nav-toggle-icon span:nth-child(2) { opacity: 0; }
      header.nav-open .nav-toggle-icon span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

      header nav {
        position: absolute;
        top: calc(100% + 6px);
        right: clamp(16px, 4vw, 28px);
        left: auto;
        width: min(260px, calc(100vw - 32px));
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 4px;
        padding: 10px;
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: var(--radius-panel);
        background: rgba(15, 21, 26, .97);
        box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
        font-size: 15px;
        display: none;
      }

      header.nav-open nav { display: flex; }

      header nav a {
        padding: 12px 14px;
        border-radius: 10px;
      }

      header nav .nav-services {
        display: grid;
        width: 100%;
        padding-bottom: 0;
        margin-bottom: 0;
      }

      header nav .nav-services-trigger {
        justify-content: space-between;
        min-height: 45px;
        padding: 0 14px;
        border-radius: 10px;
        text-align: left;
      }

      header nav .nav-services-menu {
        position: static;
        min-width: 0;
        display: none;
        gap: 2px;
        margin: 2px 0 4px;
        padding: 0 0 0 10px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        opacity: 1;
        pointer-events: auto;
        transform: none;
      }

      header nav .nav-services.is-open .nav-services-menu,
      header nav .nav-services.is-current .nav-services-menu {
        display: grid;
      }

      header nav a:hover,
      header nav a:active,
      header nav .nav-services-trigger:hover,
      header nav .nav-services-trigger:active { background: rgba(255, 255, 255, .08); }

      .nav-cta {
        margin-top: 4px;
        justify-content: center;
      }

      .contact-rail {
        top: auto;
        right: 16px;
        bottom: 16px;
        transform: none;
      }

      .contact-rail-item {
        display: none;
      }

      .contact-rail-primary {
        width: 52px;
        min-height: 52px;
        display: grid;
        box-shadow: 0 18px 42px rgba(245, 131, 115, .34);
      }

      .contact-rail-primary:hover,
      .contact-rail-primary:focus-visible {
        width: 164px;
      }

      .hero-inner {
        padding: 78px 20px 40px;
      }

      .hero h1 {
        font-size: clamp(34px, 9vw, 42px);
        line-height: 1.12;
      }

      .hero .lead {
        font-size: 15px;
        line-height: 1.5;
      }

      .hero .trust-badges {
        grid-template-columns: minmax(0, 1fr);
        align-items: center;
        justify-items: center;
        gap: 18px;
        margin-top: 22px;
      }

      .hero .trust-badge img {
        width: min(78vw, 260px);
        max-width: 100%;
        max-height: none;
      }

      .hero .trust-badge img.trust-badge-provenexpert {
        width: min(54vw, 190px);
        max-height: none;
      }
    }

    /* ===== Abschluss-CTA mit Flicker-Schriftzug "KR\00DCERSHOF DIGITAL" ===== */
    .flicker-cta {
      position: relative;
      overflow: hidden;
      background: #fff;
      padding: clamp(80px, 13vw, 150px) clamp(20px, 6vw, 80px);
      text-align: center;
      isolation: isolate;
    }

    .flicker-cta-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
    }

    /* helle Vignette: haelt den Text auch ueber dem Flicker-Schriftzug lesbar */
    .flicker-cta::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: radial-gradient(60% 78% at 50% 50%, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .72) 44%, rgba(255, 255, 255, 0) 100%);
    }

    .flicker-cta-inner {
      position: relative;
      z-index: 2;
      max-width: 640px;
      margin: 0 auto;
      display: grid;
      justify-items: center;
      gap: 18px;
    }

    .flicker-cta-title {
      margin: 0;
      max-width: 20ch;
      color: var(--krue-ink);
      font-size: var(--fs-h2);
      line-height: 1.14;
    }

    .flicker-cta-sub {
      margin: 0;
      max-width: 50ch;
      color: var(--muted);
      font-size: clamp(15px, 1.6vw, 18px);
      line-height: 1.6;
    }

    .flicker-cta-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      margin-top: 14px;
    }

    @media (prefers-reduced-motion: reduce) {
      .flicker-cta-canvas {
        opacity: .7;
      }
    }

/* ============================================================
   4DD-style transferred sections, scoped under .v4 / .v4form.
   These sections define the editorial typography direction reused
   by normal site body copy.
   ============================================================ */
.v4{
  --ink:#0e1c26; --ink-soft:#1c2c38; --accent:#e25d3f; --accent-d:#c8472b;
  --paper:#fff; --panel:#f4f2ee; --panel-2:#eceae4; --line:#dcdad3;
  --line-d:rgba(255,255,255,.14); --muted:#6b7884;
  --pad:clamp(20px,5vw,64px); --maxw:1200px;
  font-family:var(--font-body); color:#33414c;
}
.v4 h2,.v4 h3{font-family:var(--font-editorial-heading);color:var(--ink);margin:0;line-height:1.06;font-weight:700;letter-spacing:.2px}
.v4 h2{font-size:clamp(2rem,3.6vw,3rem)}
.v4 h3{font-size:clamp(1.35rem,2vw,1.7rem)}
.v4 p{margin:0 0 1.05em}
.v4 img{max-width:100%;display:block}
.v4 .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.v4 .eyebrow{display:inline-block;font-family:var(--font-editorial-kicker);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.82rem;color:var(--accent);margin-bottom:14px}
.v4 .btn{display:inline-block;background:var(--accent);color:#fff;font-family:var(--font-editorial-kicker);font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:.95rem;text-decoration:none;padding:14px 30px;border:2px solid var(--accent);border-radius:3px;transition:.18s;cursor:pointer}
.v4 .btn:hover{background:var(--accent-d);border-color:var(--accent-d)}

/* prose 2-col (Grundlagen) */
.v4 .prose-2col{padding:clamp(34px,4vw,58px) clamp(28px,3vw,56px);max-width:1280px;margin-inline:auto}
.v4 .p2-head{margin-bottom:24px}
.v4 .p2-head h2{margin-top:6px}
.v4 .p2-grid{display:grid;grid-template-columns:1fr clamp(340px,30%,420px);gap:clamp(34px,3vw,56px);align-items:start}
.v4 .p2-cols{font-size:1rem;line-height:1.55;column-count:2;column-gap:clamp(30px,2.2vw,42px)}
.v4 .p2-cols p{margin:0 0 1em;break-inside:avoid}
.v4 .p2-cols strong{font-weight:700;color:var(--ink)}
.v4 .p2-cols .btn{display:inline-block;margin-top:14px;column-span:all}
.v4 .p2-figure{margin:0}
.v4 .p2-figure img{width:100%;height:auto;border-radius:4px;display:block}
.v4 .p2-figure figcaption{font-family:var(--font-editorial-kicker);font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;line-height:1.35;margin-top:12px;border-left:3px solid var(--accent);padding-left:11px}

/* dark band (Vorteile) */
.v4 .dark-band{background:var(--ink);color:#c4ccd2}
.v4 .dark-band .eyebrow{color:var(--accent)}
.v4 .dark-band h2,.v4 .dark-band h3{color:#fff}
.v4 .db-grid{display:grid;grid-template-columns:1fr 1.15fr .85fr;gap:0;align-items:stretch}
.v4 .db-media{margin-left:calc(var(--pad)*-1)}
.v4 .db-media img{width:100%;height:100%;min-height:300px;object-fit:cover}
.v4 .db-text{padding:clamp(28px,3.4vw,48px) clamp(24px,2.6vw,42px)}
.v4 .db-text h2{margin-bottom:14px;font-size:clamp(1.6rem,2.4vw,2.25rem)}
.v4 .db-text p{font-size:1rem}
.v4 .db-partner{display:flex;align-items:center;gap:14px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line-d)}
.v4 .db-partner img{height:48px;width:auto;background:#fff;border-radius:6px;padding:6px}
.v4 .db-partner span{font-size:.84rem;color:#9aa6b0;line-height:1.4}
.v4 .db-benefits{background:var(--ink-soft);padding:clamp(28px,3.4vw,48px) clamp(24px,2.6vw,40px);margin-right:calc(var(--pad)*-1)}
.v4 .db-benefits h3{margin-bottom:12px}
.v4 ul.check{list-style:none;margin:0;padding:0}
.v4 ul.check li{position:relative;padding:7px 0 7px 36px;border-bottom:1px solid var(--line-d);font-size:.97rem;color:#d4dadf}
.v4 ul.check li:last-child{border-bottom:0}
.v4 ul.check li::before{content:"";position:absolute;left:0;top:8px;width:21px;height:21px;border-radius:50%;background:var(--accent)}
.v4 ul.check li::after{content:"";position:absolute;left:7px;top:12px;width:6px;height:9px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(40deg)}

/* logos marquee */
.v4 .logos{padding-block:clamp(40px,5vw,68px);text-align:center}
.v4 .logos-kicker{font-family:var(--font-editorial-kicker);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.82rem;color:var(--muted);margin:0 0 28px}
.v4 .logo-marquee{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.v4 .logo-track{display:flex;align-items:center;width:max-content;animation:v4-logo-scroll 40s linear infinite}
.v4 .logo-track img{height:46px;width:auto;margin-right:clamp(48px,5vw,88px);opacity:.72;filter:grayscale(1);flex:none;transition:.2s}
.v4 .logo-track img.lg-sm{height:32px}
.v4 .logo-track img.lg-md{height:58px}
.v4 .logo-track img.lg-lg{height:68px}
.v4 .logo-track img.lg-tile{height:72px}
.v4 .logo-track img:hover{opacity:1;filter:none}
.v4 .logo-marquee:hover .logo-track{animation-play-state:paused}
@keyframes v4-logo-scroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.v4 .logo-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}.v4 .logo-track img{margin:14px 32px}}

/* contact form fields (visual only; content + avatar aside untouched) */
.contact-form.v4form{font-family:var(--font-body)}
.contact-form.v4form label{font-family:var(--font-editorial-kicker);font-weight:700;color:#0e1c26;text-transform:uppercase;letter-spacing:.05em;font-size:.84rem}
.contact-form.v4form input,.contact-form.v4form select,.contact-form.v4form textarea{display:block;width:100%;margin-top:7px;padding:13px 14px;border:1px solid #dcdad3;border-radius:3px;font-family:var(--font-body);font-size:1rem;color:#0e1c26;text-transform:none;letter-spacing:0;font-weight:400;background:#fff}
.contact-form.v4form input:focus,.contact-form.v4form select:focus,.contact-form.v4form textarea:focus{outline:2px solid #e25d3f;border-color:#e25d3f}
.contact-form.v4form .file-field,.contact-form.v4form .consent-field{text-transform:none;letter-spacing:0;font-weight:400;font-family:var(--font-body);color:#33414c;font-size:.92rem}
.contact-form.v4form .file-field span{display:block;text-transform:none;color:#6b7884}
.contact-form.v4form .consent-field input{display:inline-block;width:auto;margin:3px 0 0}

/* responsive */
@media(max-width:980px){
  .v4 .p2-grid{grid-template-columns:1fr}
  .v4 .p2-figure img{max-height:360px;object-fit:cover}
  .v4 .db-grid{grid-template-columns:1fr}
  .v4 .db-media,.v4 .db-benefits{margin:0}
  .v4 .db-media img{min-height:280px}
}
@media(max-width:760px){
  .v4 .p2-grid{display:flex;flex-direction:column}
  .v4 .p2-figure{order:-1;margin:0 0 20px}
  .v4 .p2-cols{column-count:1}
  .contact-form.v4form .form-row{grid-template-columns:1fr}
}