:root {
      --teal-300: #6BC7CA;
      --teal-500: #1E919C;
      --teal-700: #12636B;
      --teal-900: #082E33;
      --ink: #101719;
      --ink-muted: #526064;
      --surface: #F3F7F6;
      --surface-cool: #E4EFED;
      --paper: #FCFEFD;
      --line: #C7D7D4;
      --white: #FFFFFF;
      --ease: cubic-bezier(0.22, 1, 0.36, 1);
      --font-display: "DM Serif Display", Georgia, serif;
      --font-body: "Manrope", sans-serif;
      --font-mono: "Space Mono", monospace;
      --max: 1120px;
      --gutter: clamp(20px, 4.5vw, 48px);
      --section: clamp(84px, 12vh, 136px);
      --radius: 8px;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: var(--font-body);
      color: var(--ink);
      background: var(--paper);
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
    }
    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; }

    .wrap {
      width: min(100% - (var(--gutter) * 2), var(--max));
      margin-inline: auto;
    }
    .wrap-narrow { max-width: 720px; }

    .mono {
      font-family: var(--font-mono);
      font-size: 0.78rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      font-weight: 700;
    }

    h1, h2, h3 {
      margin: 0;
      font-weight: 400;
      letter-spacing: -0.02em;
      text-wrap: balance;
    }
    h1 {
      font-family: var(--font-display);
      font-size: clamp(2.55rem, 6.4vw, 4.35rem);
      line-height: 1.05;
    }
    h2 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4.2vw, 3.1rem);
      line-height: 1.12;
    }
    h3 {
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 1.12rem;
      letter-spacing: -0.015em;
    }
    p { margin: 0; }
    .lead {
      margin-top: 1.1rem;
      font-size: clamp(1.05rem, 1.5vw, 1.18rem);
      color: var(--ink-muted);
      max-width: 38rem;
      line-height: 1.65;
    }

    /* Nav */
    .nav {
      position: fixed;
      inset: 0 0 auto;
      z-index: 40;
      background: color-mix(in srgb, var(--teal-900) 88%, transparent);
      border-bottom: 1px solid color-mix(in srgb, var(--white) 12%, transparent);
      backdrop-filter: blur(14px);
      transition: background 220ms var(--ease), border-color 220ms var(--ease), backdrop-filter 220ms var(--ease);
    }
    .nav.is-scrolled,
    .nav.is-open {
      background: color-mix(in srgb, var(--teal-900) 94%, transparent);
    }
    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 72px;
      gap: 1rem;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 0.7rem;
      color: var(--white);
      font-weight: 700;
      letter-spacing: -0.02em;
    }
    .brand img {
      width: 34px;
      height: 34px;
      border-radius: 50%;
    }
    .nav-links {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 0.35rem 1.15rem;
      color: var(--white);
      font-size: 0.9rem;
      font-weight: 600;
      text-shadow: 0 1px 10px rgba(8, 46, 51, 0.7);
    }
    .nav-links a:hover { color: var(--teal-300); }
    .nav-toggle {
      display: none;
      width: 42px;
      height: 42px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--white);
      cursor: pointer;
      align-items: center;
      justify-content: center;
    }
    .nav-toggle span,
    .nav-toggle span::before,
    .nav-toggle span::after {
      display: block;
      width: 20px;
      height: 2px;
      background: currentColor;
      border-radius: 1px;
      position: relative;
      transition: transform 180ms var(--ease), top 180ms var(--ease), background 180ms var(--ease);
    }
    .nav-toggle span::before,
    .nav-toggle span::after {
      content: "";
      position: absolute;
      left: 0;
    }
    .nav-toggle span::before { top: -6px; }
    .nav-toggle span::after { top: 6px; }
    .nav.is-open .nav-toggle span { background: transparent; }
    .nav.is-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
    .nav.is-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.55rem;
      min-height: 48px;
      padding: 0.8rem 1.2rem;
      border-radius: var(--radius);
      border: 1px solid transparent;
      font-weight: 700;
      font-size: 0.95rem;
      transition: transform 160ms var(--ease), background 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
    }
    .btn:active { transform: scale(0.98); }
    .btn .arrow {
      display: inline-block;
      transition: transform 180ms var(--ease);
    }
    .btn:hover .arrow { transform: translateX(4px); }
    .btn:focus-visible {
      outline: 2px solid var(--teal-300);
      outline-offset: 3px;
    }
    .btn-primary {
      background: var(--teal-500);
      color: var(--white);
    }
    .btn-primary:hover { background: var(--teal-300); color: var(--ink); }
    .hero .btn-primary,
    .nav .btn-primary {
      background: var(--paper);
      color: var(--ink);
    }
    .hero .btn-primary:hover,
    .nav .btn-primary:hover {
      background: var(--teal-300);
      color: var(--ink);
    }
    .btn-dark {
      background: var(--ink);
      color: var(--white);
    }
    .btn-dark:hover { background: var(--teal-700); }
    .btn-ghost {
      background: transparent;
      color: var(--white);
      border-color: color-mix(in srgb, var(--white) 28%, transparent);
    }
    .btn-ghost:hover {
      border-color: var(--white);
      background: color-mix(in srgb, var(--white) 8%, transparent);
    }
    .btn-text {
      background: transparent;
      color: var(--teal-700);
      padding-inline: 0.2rem;
      min-height: auto;
    }
    .btn-text:hover { color: var(--ink); }
    .nav .btn-primary { min-height: 42px; padding: 0.65rem 1rem; font-size: 0.88rem; }

    /* Hero */
    .hero {
      position: relative;
      min-height: 100svh;
      display: grid;
      align-items: end;
      overflow: hidden;
      background: var(--teal-900);
      color: var(--white);
    }
    .hero-media {
      position: absolute;
      inset: 0;
    }
    .hero-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 62% -20%;
    }
    .hero-shade {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to bottom, rgba(8, 46, 51, 0.72) 0%, rgba(8, 46, 51, 0.18) 18%, transparent 32%),
        linear-gradient(105deg,
          rgba(8, 46, 51, 0.97) 0%,
          rgba(8, 46, 51, 0.9) 34%,
          rgba(8, 46, 51, 0.48) 58%,
          rgba(8, 46, 51, 0.14) 78%,
          rgba(8, 46, 51, 0.06) 100%),
        linear-gradient(to top, rgba(8, 46, 51, 0.55), transparent 42%);
    }
    .hero-inner {
      position: relative;
      z-index: 1;
      padding: 8.5rem 0 4.5rem;
      max-width: 500px;
    }
    .hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: 0.7rem;
      color: var(--teal-300);
      margin-bottom: 1.35rem;
    }
    .hero-kicker::before {
      content: "";
      width: 28px;
      height: 2px;
      background: var(--teal-500);
    }
    .hero h1 .line2 {
      display: block;
      font-family: var(--font-display);
      font-size: clamp(1.55rem, 3.4vw, 2.5rem);
      font-style: italic;
      font-weight: 400;
      line-height: 1.16;
      letter-spacing: -0.02em;
      color: var(--teal-300);
      max-width: 16em;
      margin-top: 0.38em;
    }
    .hero .lead {
      color: color-mix(in srgb, var(--white) 78%, transparent);
      margin-top: 1.15rem;
      max-width: 28rem;
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.7rem 1.5rem;
      margin-top: 1.55rem;
    }
    .hero .btn-ghost {
      min-height: auto;
      padding: 0.35rem 0;
      border: none;
      font-weight: 600;
      font-size: 0.95rem;
      color: color-mix(in srgb, var(--white) 72%, transparent);
    }
    .hero .btn-ghost:hover {
      background: transparent;
      color: var(--white);
    }
    .hero-trust {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.4rem 1.5rem;
      margin-top: 2.5rem;
      padding-top: 1.75rem;
      border-top: 1px solid color-mix(in srgb, var(--white) 14%, transparent);
    }
    .hero-trust article {
      min-width: 0;
    }
    .hero-trust .label {
      display: block;
      font-family: var(--font-mono);
      font-size: 0.68rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: color-mix(in srgb, var(--white) 72%, transparent);
      margin-bottom: 0.55rem;
    }
    .hero-trust .value {
      display: block;
      font-family: var(--font-body);
      font-size: clamp(0.92rem, 1.4vw, 1.05rem);
      font-weight: 700;
      letter-spacing: -0.015em;
      line-height: 1.4;
      color: color-mix(in srgb, var(--white) 92%, transparent);
    }
    .hero-trust .value span {
      display: block;
      white-space: nowrap;
    }

    /* Trust logos */
    .trust-logos {
      background: var(--white);
      border-bottom: 1px solid var(--line);
      overflow: hidden;
      padding: 0;
    }
    .trust-logos-label {
      text-align: center;
      padding: 1.8rem var(--gutter) 0.35rem;
      color: var(--ink-muted);
    }
    .trust-marquee {
      overflow: hidden;
      padding: clamp(40px, 5.5vh, 64px) 0 clamp(48px, 6.5vh, 72px);
      mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    }
    .trust-track {
      display: flex;
      flex-wrap: nowrap;
      width: max-content;
      animation: trust-scroll var(--trust-duration, 42s) linear infinite;
    }
    .trust-marquee:hover .trust-track {
      animation-play-state: paused;
    }
    @keyframes trust-scroll {
      from { transform: translate3d(0, 0, 0); }
      to { transform: translate3d(var(--trust-shift, -50%), 0, 0); }
    }
    .trust-set {
      display: flex;
      align-items: center;
      gap: clamp(4.5rem, 8vw, 8.5rem);
      padding: 0 clamp(2.5rem, 5vw, 5rem);
    }
    .trust-set img {
      display: block;
      height: 36px;
      width: auto;
      max-width: 160px;
      object-fit: contain;
      filter: grayscale(1) contrast(1.05);
      opacity: 0.72;
      transition: opacity 180ms var(--ease), filter 180ms var(--ease);
    }
    .trust-set img.wide { max-width: 200px; height: 32px; }
    .trust-set img.tall { height: 44px; max-width: 120px; }
    .trust-marquee:hover .trust-set img {
      opacity: 0.9;
      filter: grayscale(0.35) contrast(1.05);
    }
    .trust-word {
      font-family: var(--font-body);
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--ink);
      opacity: 0.55;
      white-space: nowrap;
      transition: opacity 180ms var(--ease);
    }
    .trust-marquee:hover .trust-word { opacity: 0.8; }

    /* Sections */
    section.problem,
    section.offer,
    section.experience,
    section.proof,
    section.cta,
    section.portrait { padding: var(--section) 0; }
    .section-label {
      color: var(--teal-700);
      margin-bottom: 1rem;
    }

    /* Problem */
    .problem {
      background: var(--paper);
    }
    .problem-list {
      list-style: none;
      margin: 2.4rem 0 0;
      padding: 0;
      display: grid;
      gap: 0;
      border-top: 1px solid var(--line);
    }
    .problem-list li {
      display: grid;
      grid-template-columns: 4.5rem 1fr;
      gap: 1rem;
      padding: 1.35rem 0;
      border-bottom: 1px solid var(--line);
      align-items: baseline;
    }
    .problem-list .idx {
      color: var(--teal-500);
    }
    .problem-list p {
      font-size: 1.12rem;
      font-weight: 600;
      letter-spacing: -0.015em;
      max-width: 36rem;
    }

    /* Offer */
    .offer {
      background: var(--ink);
      color: var(--white);
    }
    .offer .section-label { color: var(--teal-300); }
    .offer .lead { color: color-mix(in srgb, var(--white) 68%, transparent); }
    .offer-rows {
      margin-top: 2.8rem;
      border-top: 1px solid color-mix(in srgb, var(--white) 12%, transparent);
    }
    .offer-row {
      display: grid;
      grid-template-columns: 5rem 1fr;
      gap: 1.2rem;
      padding: 1.7rem 0;
      border-bottom: 1px solid color-mix(in srgb, var(--white) 12%, transparent);
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
    }
    .offer-row.in {
      opacity: 1;
      transform: none;
    }
    .offer-row .num {
      color: var(--teal-300);
      padding-top: 0.25rem;
    }
    .offer-row h3 {
      font-family: var(--font-display);
      font-size: clamp(1.45rem, 2.4vw, 1.85rem);
      font-weight: 400;
      margin-bottom: 0.45rem;
    }
    .offer-row p {
      color: color-mix(in srgb, var(--white) 68%, transparent);
      max-width: 40rem;
    }

    /* Experience */
    .experience {
      background: var(--surface);
    }
    .exp-grid {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: clamp(2rem, 5vw, 4.5rem);
      align-items: start;
      margin-top: 2.2rem;
    }
    .exp-copy .lead { margin-top: 0; }
    .exp-copy p + p { margin-top: 1rem; color: var(--ink-muted); }
    .milestones {
      position: relative;
      padding-left: 1.35rem;
    }
    .milestones::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.35rem;
      bottom: 0.35rem;
      width: 1px;
      background: var(--line);
      transform-origin: top;
      transform: scaleY(0);
      transition: transform 1s var(--ease);
    }
    .milestones.in::before { transform: scaleY(1); }
    .ms {
      position: relative;
      padding: 0 0 1.55rem 0.9rem;
    }
    .ms:last-child { padding-bottom: 0; }
    .ms::before {
      content: "";
      position: absolute;
      left: -1.35rem;
      top: 0.45rem;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--teal-500);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal-500) 18%, transparent);
      transform: translateX(-4px);
    }
    .ms .when {
      color: var(--teal-700);
      margin-bottom: 0.35rem;
    }
    .ms strong {
      display: block;
      font-size: 1.05rem;
      margin-bottom: 0.25rem;
    }
    .ms p {
      color: var(--ink-muted);
      font-size: 0.95rem;
    }

    /* Proof / Stimmen */
    .proof {
      background:
        radial-gradient(900px 420px at 50% 0%, rgba(30, 145, 156, 0.06), transparent 60%),
        var(--paper);
      border-block: 1px solid var(--line);
    }
    .proof-intro {
      max-width: 40rem;
      margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
    }
    .proof-intro .lead {
      margin-top: 0.9rem;
    }
    .quotes {
      display: grid;
      gap: clamp(1.25rem, 2.5vw, 1.75rem);
    }
    .quote {
      margin: 0;
      padding: clamp(1.6rem, 3vw, 2.25rem);
      border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
      border-radius: 20px;
      background: color-mix(in srgb, var(--white) 88%, var(--surface));
      box-shadow: 0 1px 0 rgba(16, 23, 25, 0.03);
      display: grid;
      gap: 1.5rem;
      transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
    }
    .quote:hover {
      transform: translateY(-2px);
      border-color: color-mix(in srgb, var(--teal-500) 28%, var(--line));
      box-shadow: 0 18px 40px rgba(16, 23, 25, 0.06);
    }
    .quote p {
      font-family: var(--font-display);
      font-size: clamp(1.35rem, 2.4vw, 1.85rem);
      line-height: 1.35;
      letter-spacing: -0.02em;
      max-width: 38rem;
      margin: 0;
      color: var(--ink);
    }
    .quote-person {
      display: flex;
      align-items: center;
      gap: 0.95rem;
    }
    .quote-person img {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
      background: var(--surface-cool);
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent);
    }
    .quote-person strong {
      display: block;
      color: var(--ink);
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 0.95rem;
      letter-spacing: -0.015em;
      margin-bottom: 0.15rem;
    }
    .quote-person span {
      display: block;
      font-size: 0.88rem;
      color: var(--ink-muted);
      font-weight: 500;
    }

    /* CTA */
    .cta {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(700px 380px at 85% 15%, rgba(30, 145, 156, 0.28), transparent 60%),
        var(--teal-900);
      color: var(--white);
    }
    .cta-grid {
      display: grid;
      grid-template-columns: 1.25fr 0.75fr;
      gap: clamp(1.5rem, 4vw, 3rem);
      align-items: end;
    }
    .cta .lead { color: color-mix(in srgb, var(--white) 72%, transparent); }
    .cta-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.8rem;
      margin-top: 1.6rem;
    }
    .cta-aside {
      border: 1px solid color-mix(in srgb, var(--white) 16%, transparent);
      border-radius: var(--radius);
      padding: 1.3rem 1.35rem;
      background: color-mix(in srgb, var(--white) 4%, transparent);
    }
    .cta-aside p {
      color: color-mix(in srgb, var(--white) 70%, transparent);
      font-size: 0.95rem;
      margin-bottom: 0.85rem;
    }
    .cta-aside a.mail {
      font-family: var(--font-display);
      font-size: 1.35rem;
      border-bottom: 1px solid color-mix(in srgb, var(--white) 35%, transparent);
      padding-bottom: 0.1rem;
    }
    .cta-aside a.mail:hover { border-bottom-color: var(--white); }
    .cta-aside .loc {
      margin-top: 1.1rem;
      margin-bottom: 0;
      font-family: var(--font-mono);
      font-size: 0.72rem;
      color: color-mix(in srgb, var(--white) 55%, transparent);
    }

    /* Portrait band */
    .portrait {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      min-height: 420px;
      background: var(--surface-cool);
    }
    .portrait-media {
      min-height: 360px;
      overflow: hidden;
    }
    .portrait-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 30%;
      min-height: 360px;
    }
    .portrait-copy {
      display: grid;
      align-content: center;
      padding: clamp(2rem, 5vw, 3.5rem);
    }
    .portrait-copy .lead { margin-top: 0.9rem; }

    .site-footer {
      background: var(--ink);
      color: color-mix(in srgb, var(--white) 55%, transparent);
      padding: 1.4rem 0 1.8rem;
      font-size: 0.86rem;
    }
    .footer-inner {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 0.8rem 1.5rem;
    }
    .site-footer a:hover { color: var(--white); }

    .reveal {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    }
    .reveal.in {
      opacity: 1;
      transform: none;
    }

    @media (max-width: 1020px) {
      .nav-toggle { display: flex; }
      .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.4rem var(--gutter) 1rem;
        background: color-mix(in srgb, var(--teal-900) 96%, transparent);
        border-bottom: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
        text-shadow: none;
      }
      .nav.is-open .nav-links { display: flex; }
      .nav-links a {
        padding: 0.8rem 0;
        border-bottom: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
      }
      .nav-links a:last-child { border-bottom: 0; }
    }

    @media (max-width: 900px) {
      .nav {
        background: color-mix(in srgb, var(--teal-900) 92%, transparent);
        border-bottom-color: color-mix(in srgb, var(--white) 10%, transparent);
        backdrop-filter: blur(12px);
      }
      .hero {
        min-height: auto;
        align-items: stretch;
      }
      .hero-media {
        position: relative;
        height: 42vh;
        min-height: 260px;
      }
      .hero-media img {
        object-position: 58% 12%;
      }
      .hero-shade {
        background:
          linear-gradient(to top, rgba(8, 46, 51, 0.98) 0%, rgba(8, 46, 51, 0.35) 55%, rgba(8, 46, 51, 0.2) 100%);
      }
      .hero-inner {
        max-width: none;
        padding: 1.6rem 0 2.8rem;
        margin-top: -4.5rem;
      }
      .hero-actions .btn-primary { width: 100%; }
      .hero-trust {
        grid-template-columns: 1fr;
        gap: 1.25rem;
      }
      .exp-grid,
      .cta-grid,
      .portrait {
        grid-template-columns: 1fr;
      }
      .problem-list li { grid-template-columns: 3.2rem 1fr; }
      .offer-row { grid-template-columns: 3.5rem 1fr; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .hero-media img { animation: none; }
      .reveal, .offer-row { opacity: 1; transform: none; transition: none; }
      .milestones::before { transform: none; }
      .trust-track { animation: none; }
    }