:root {
      --navy: #131f44;
      --navy-dark: #0c1430;
      --navy-deep: #080d20;
      --logo-blue: #102882;
      --logo-blue-light: #1c3aa3;
      --logo-blue-deep: #0a1a55;
      --gold: #c9a04b;
      --gold-light: #e0bd6e;
      --ink: #111827;
      --muted: #5c6478;
      --line: #e6e8ef;
      --line-dark: rgba(255,255,255,0.14);
      --paper: #ffffff;
      --paper-soft: #f6f7fa;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: var(--ink);
      line-height: 1.65;
      background: var(--paper);
      -webkit-font-smoothing: antialiased;
    }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    h1, h2, h3, h4, .display {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      font-weight: 800;
      letter-spacing: -0.02em;
    }

    .wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

    /* ===== Header ===== */
    .site-header {
      position: sticky; top: 0; z-index: 100;
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--line);
    }
    .header-inner {
      display: flex; align-items: center; gap: 28px;
      padding: 20px 28px; max-width: 1180px; margin: 0 auto;
    }
    .brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
    .brand-logo { height: 48px; width: auto; display: block; }
    @media (max-width: 480px) { .brand-logo { height: 40px; } }
    .brand-mark {
      width: 34px; height: 34px; border-radius: 7px;
      background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 2px 10px rgba(19,31,68,0.25);
    }
    .brand-mark svg { width: 19px; height: 19px; color: var(--gold); }
    .brand-text { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 21px; color: var(--navy); letter-spacing: -0.02em; }
    .brand-text span { color: var(--gold); }

    /* the Andon-style connecting rule */
    .header-rule { flex: 1; height: 1px; background: var(--line); }

    .nav { display: flex; align-items: center; gap: 30px; flex-shrink: 0; }
    .nav a { font-size: 15px; font-weight: 500; color: var(--ink); transition: color .15s; }
    .nav a:hover { color: var(--gold); }
    .nav a.nav-cta { color: var(--navy); font-weight: 600; }
    .nav a.nav-cta:hover { color: var(--gold); }

    .burger { display: none; background: none; border: none; cursor: pointer; padding: 6px; margin-left: auto; }
    .burger span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; }

    @media (max-width: 900px) {
      .header-rule { display: none; }
      .burger { display: block; }
      .nav {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        background: #fff; flex-direction: column; align-items: stretch;
        padding: 18px 28px; gap: 18px; border-bottom: 1px solid var(--line);
      }
      .nav.open { display: flex; }
    }

    /* ===== Hero (Andon-style dark photographic block) ===== */
    .hero {
      position: relative; overflow: hidden;
      background:
        radial-gradient(120% 90% at 78% 62%, rgba(201,160,75,0.42) 0%, rgba(201,160,75,0.10) 26%, transparent 52%),
        radial-gradient(90% 70% at 12% 8%, rgba(50,80,190,0.32) 0%, transparent 50%),
        linear-gradient(155deg, var(--logo-blue) 0%, #0b1c5c 50%, #070f33 100%);
      color: #fff;
    }
    .hero .wrap {
      display: grid; grid-template-columns: 1fr 1.1fr;
      column-gap: 48px; row-gap: 26px; align-items: start; align-content: center;
      min-height: 0; padding-top: 44px; padding-bottom: 64px;
    }
    .hero .hero-eyebrow { grid-column: 1 / -1; }
    .hero-inner { grid-column: 1; grid-row: 2; }
    .hero-photo { grid-column: 2; grid-row: 2; align-self: stretch; }
    .hero-body { grid-column: 1; grid-row: 3; position: relative; z-index: 2; max-width: 560px; }
    /* blueprint grid overlay */
    .hero::before {
      content: ''; position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.16) 1px, transparent 1px);
      background-size: 54px 54px;
      mask-image: radial-gradient(150% 120% at 50% 95%, #000 55%, transparent 100%);
      -webkit-mask-image: radial-gradient(150% 120% at 50% 95%, #000 55%, transparent 100%);
      pointer-events: none;
    }
    /* warm gold glow behind the hero photo */
    .hero::after {
      content: ''; position: absolute;
      right: 3%; top: 50%; transform: translateY(-50%);
      width: 480px; height: 360px; border-radius: 20px;
      background: radial-gradient(closest-side, rgba(201,160,75,0.55) 0%, transparent 100%);
      filter: blur(34px);
      pointer-events: none; z-index: 1;
    }
    @media (max-width: 860px) { .hero::after { display: none; } }

    /* hero photo card */
    .hero-photo {
      position: relative; z-index: 2; justify-self: end; margin: 0;
      width: 100%; max-width: 600px; min-height: 240px; overflow: hidden;
      border-radius: 18px; border: 1px solid rgba(255,255,255,0.14);
      box-shadow: 0 34px 80px rgba(0,0,0,0.5);
    }
    .hero-photo img {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; display: block;
      filter: brightness(1.4) contrast(1.03) saturate(1.06);
    }
    @media (max-width: 860px) {
      .hero .wrap { grid-template-columns: 1fr; min-height: 0; padding-top: 36px; padding-bottom: 56px; }
      .hero-photo { display: none; }
    }

    .hero-inner { position: relative; z-index: 2; max-width: 640px; }
    .hero-eyebrow {
      font-size: clamp(20px, 2.7vw, 32px); font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2;
      white-space: nowrap; color: var(--gold-light); margin-bottom: 6px;
    }
    @media (max-width: 760px) { .hero-eyebrow { white-space: normal; font-size: 17px; } }
    .hero h1 {
      font-size: clamp(40px, 6.4vw, 76px);
      font-weight: 800; line-height: 1.05; margin-bottom: 0;
    }
    .hero h1 .accent { color: var(--gold-light); }
    .hero-sub {
      font-size: clamp(16px, 1.7vw, 19px);
      color: rgba(255,255,255,0.82); max-width: 560px; margin-bottom: 34px;
      line-height: 1.6;
    }
    .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

    /* ===== Buttons ===== */
    .btn {
      display: inline-flex; align-items: center; gap: 9px;
      padding: 14px 26px; border-radius: 8px;
      font-weight: 600; font-size: 15px; cursor: pointer; border: none;
      transition: all .18s ease; font-family: inherit;
    }
    .btn-gold { background: var(--gold); color: var(--navy-dark); }
    .btn-gold:hover { background: var(--gold-light); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(201,160,75,0.4); }
    .btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.35); }
    .btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: #fff; }
    .btn-white { background: #fff; color: var(--navy-dark); }
    .btn-white:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,0.25); }
    .btn-navy { background: var(--logo-blue); color: #fff; }
    .btn-navy:hover { background: var(--logo-blue-deep); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(16,40,130,0.35); }

    /* ===== Referenzprojekte (laufender Slider) ===== */
    .refstrip { padding: 40px 0 8px; background: #fff; overflow: hidden; }
    .refstrip-label {
      text-align: center; font-size: 13px; font-weight: 600;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--muted); margin-bottom: 26px;
    }
    .refstrip-viewport {
      overflow: hidden; width: 100%;
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    }
    .refstrip-track {
      display: flex; width: max-content; gap: 22px; padding: 0 11px;
      animation: refscroll 85s linear infinite;
    }
    .reftile {
      position: relative; flex-shrink: 0;
      width: 420px; height: 264px; border-radius: 16px; overflow: hidden;
      box-shadow: 0 14px 34px rgba(19,31,68,0.12);
    }
    .reftile img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .reftile figcaption {
      position: absolute; inset: auto 0 0 0; padding: 20px 22px;
      background: linear-gradient(180deg, transparent 0%, rgba(8,13,32,0.82) 100%);
      color: #fff;
    }
    .reftile .rt-kind { display: block; font-weight: 800; font-size: 19px; letter-spacing: -0.01em; text-shadow: 0 2px 10px rgba(0,0,0,0.4); }
    .reftile .rt-desc { display: block; font-size: 13.5px; color: rgba(255,255,255,0.85); margin-top: 2px; }
    /* left -> right travel (consistent with logo strip) */
    @keyframes refscroll { from { transform: translateX(-50%); } to { transform: translateX(0); } }
    @media (max-width: 600px) { .reftile { width: 300px; height: 200px; } .refstrip-track { gap: 16px; } }
    @media (prefers-reduced-motion: reduce) { .refstrip-track { animation: none; } }

    /* ===== Manifesto (centered text block) ===== */
    .manifesto { padding: 64px 0 88px; }
    @media (max-width: 600px) { .manifesto { padding: 36px 0 56px; } }
    .manifesto .wrap { max-width: 820px; }
    .manifesto p {
      font-size: clamp(19px, 2.2vw, 25px);
      line-height: 1.6; color: var(--ink);
      text-align: center; margin: 0 auto 30px;
      max-width: 720px; font-weight: 400;
    }
    .manifesto p:last-child { margin-bottom: 0; }
    .manifesto strong { font-weight: 600; color: var(--navy); }

    /* ===== Section header with extending rule ===== */
    .section { padding: 96px 0; }
    .sec-head {
      display: flex; align-items: center; gap: 28px; margin-bottom: 44px;
    }
    .sec-head h2 {
      font-size: clamp(28px, 3.4vw, 42px); font-weight: 800;
      line-height: 1.1; color: var(--ink); flex-shrink: 0;
    }
    .sec-head .rule { flex: 1; height: 1px; background: var(--ink); opacity: 0.85; }
    .sec-intro { font-size: 18px; color: var(--muted); max-width: 680px; margin: -22px 0 44px; }

    /* ===== Service / image cards ===== */
    .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
    .card {
      border-radius: 14px; overflow: hidden; background: var(--paper-soft);
      border: 1px solid var(--line);
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .card:hover { transform: translateY(-5px); box-shadow: 0 26px 50px rgba(19,31,68,0.13); }
    .card-visual {
      position: relative; height: 230px;
      display: flex; align-items: flex-end; padding: 24px;
      color: #fff; overflow: hidden;
    }
    .card-visual::before {
      content: ''; position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
      background-size: 30px 30px;
      opacity: 0.5;
    }
    .card-visual::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(8,13,32,0.15) 0%, rgba(8,13,32,0.30) 45%, rgba(8,13,32,0.78) 100%);
    }
    .card-visual h3 { text-shadow: 0 2px 12px rgba(0,0,0,0.5); }
    .cv-rohbau  { background: url('files/rohbau.jpg')  center/cover no-repeat; }
    .cv-tiefbau { background: url('files/tiefbau.jpg') center/cover no-repeat; }
    .cv-strasse { background: url('files/strasse.jpg') center 35%/cover no-repeat; }
    .card-visual .cv-icon {
      position: absolute; top: 22px; left: 24px; z-index: 2;
      width: 46px; height: 46px; border-radius: 10px;
      background: var(--logo-blue); border: 1px solid rgba(201,160,75,0.5);
      box-shadow: 0 6px 16px rgba(0,0,0,0.3);
      display: flex; align-items: center; justify-content: center;
    }
    .card-visual .cv-icon svg { width: 24px; height: 24px; color: var(--gold-light); }
    .card-visual h3 {
      position: relative; z-index: 2;
      font-size: 28px; font-weight: 800; color: #fff;
    }
    .card-body { padding: 24px 26px 28px; }
    .card-body p { color: var(--muted); font-size: 15.5px; margin-bottom: 18px; }
    .card-body ul { list-style: none; border-top: 1px solid var(--line); padding-top: 14px; }
    .card-body li {
      font-size: 14.5px; color: var(--ink); padding: 7px 0 0;
      display: flex; gap: 9px; align-items: flex-start;
    }
    .card-body li::before {
      content: ''; width: 6px; height: 6px; border-radius: 50%;
      background: var(--gold); margin-top: 9px; flex-shrink: 0;
    }
    @media (max-width: 880px) { .cards { grid-template-columns: 1fr; } }

    /* ===== Principles grid ===== */
    .principles { background: var(--paper-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .prin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
    .prin {
      padding: 38px 38px; border-bottom: 1px solid var(--line);
      display: flex; gap: 22px; align-items: flex-start;
    }
    .prin:nth-child(odd) { border-right: 1px solid var(--line); }
    .prin:nth-child(1), .prin:nth-child(2) { border-top: 1px solid var(--line); }
    .prin-num {
      font-family: 'Inter', sans-serif; font-weight: 800;
      font-size: 22px; color: var(--gold); flex-shrink: 0; min-width: 44px;
    }
    .prin h4 { font-size: 20px; font-weight: 700; margin-bottom: 8px; color: var(--navy); }
    .prin p { color: var(--muted); font-size: 15.5px; }
    @media (max-width: 760px) {
      .prin-grid { grid-template-columns: 1fr; }
      .prin:nth-child(odd) { border-right: none; }
      .prin:nth-child(2) { border-top: none; }
    }

    /* ===== Client logo marquee (continuous scroll) ===== */
    .marquee-section { padding: 9px 0; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .marquee-label {
      text-align: center; font-size: 10px; font-weight: 600;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--muted); margin-bottom: 7px;
    }
    .marquee {
      overflow: hidden; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 28px;
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    }
    .marquee-track {
      display: flex; align-items: center; width: max-content;
      gap: 72px; padding-right: 72px;
      animation: marquee-rtl 45s linear infinite;
    }
    .marquee-track img {
      height: 30px; width: auto; flex-shrink: 0;
      opacity: 0.9; transition: opacity .25s, transform .25s;
    }
    .marquee-track img.m-tall { height: 48px; }
    .marquee-track img:hover { opacity: 1; transform: scale(1.05); }
    /* left -> right travel: start shifted one set left, slide back to 0 */
    @keyframes marquee-rtl {
      from { transform: translateX(-50%); }
      to   { transform: translateX(0); }
    }
    @media (max-width: 600px) {
      .marquee {
        padding: 0 12px;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
      }
      .marquee-track { gap: 30px; padding-right: 30px; }
      .marquee-track img { height: 26px; }
      .marquee-track img.m-tall { height: 42px; }
    }
    @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; transform: translateX(0); } }

    /* ===== Big CTA banner (Andon "Join the Lab") ===== */
    .join {
      position: relative; overflow: hidden; border-radius: 18px;
      background:
        radial-gradient(90% 120% at 85% 30%, rgba(201,160,75,0.28) 0%, transparent 55%),
        linear-gradient(120deg, var(--logo-blue) 0%, var(--logo-blue-deep) 100%);
      color: #fff; padding: 64px 56px;
    }
    .join::before {
      content: ''; position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
      background-size: 50px 50px;
      mask-image: radial-gradient(80% 100% at 100% 0%, #000, transparent 70%);
      -webkit-mask-image: radial-gradient(80% 100% at 100% 0%, #000, transparent 70%);
    }
    .join-inner { position: relative; z-index: 1; max-width: 620px; }
    .join h2 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; line-height: 1.1; margin-bottom: 16px; }
    .join p { color: rgba(255,255,255,0.82); font-size: 18px; margin-bottom: 30px; max-width: 520px; }
    /* CTA banner with founder portrait */
    .join--portrait { display: grid; grid-template-columns: 1fr auto; gap: 52px; align-items: center; }
    .join-portrait { position: relative; z-index: 1; margin: 0; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
    .join-portrait img {
      width: 200px; height: 200px; border-radius: 50%; object-fit: cover;
      border: 3px solid rgba(255,255,255,0.25); box-shadow: 0 16px 40px rgba(0,0,0,0.4);
    }
    .join-portrait figcaption { margin-top: 16px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
    .join-portrait .jp-name { font-weight: 800; font-size: 18px; color: #fff; letter-spacing: -0.01em; }
    .join-portrait .jp-title { font-size: 14px; color: var(--gold-light); font-weight: 600; }
    .join-portrait .jp-role { font-size: 13.5px; color: rgba(255,255,255,0.75); }
    .join-portrait .jp-nameline { display: inline-flex; align-items: center; gap: 9px; }
    .join-portrait .jp-linkedin {
      display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
      width: 26px; height: 26px; border-radius: 6px;
      color: #fff; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22);
      transition: background .2s, color .2s, transform .2s;
    }
    .join-portrait .jp-linkedin:hover { background: #fff; color: var(--logo-blue); transform: translateY(-1px); }
    .join-portrait .jp-linkedin svg { width: 15px; height: 15px; }
    @media (max-width: 760px) {
      .join--portrait { grid-template-columns: 1fr; gap: 34px; }
      .join-portrait { justify-self: center; }
      .join--portrait .join-inner .btn { display: flex; width: 100%; justify-content: center; }
    }
    @media (max-width: 600px) { .join { padding: 48px 28px; } }

    /* ===== Testimonials as "What's new" style cards ===== */
    .quotes { background: var(--paper-soft); border-top: 1px solid var(--line); }
    .quotes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
    .quote {
      background: #fff; border: 1px solid var(--line); border-radius: 14px;
      padding: 30px; transition: transform .2s, box-shadow .2s;
    }
    .quote:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(19,31,68,0.1); }
    .quote .stars { color: var(--gold); letter-spacing: 3px; margin-bottom: 16px; }
    .quote blockquote { font-size: 16.5px; line-height: 1.6; color: var(--ink); margin-bottom: 18px; }
    .quote cite { font-style: normal; font-weight: 600; color: var(--navy); font-size: 14.5px; }
    @media (max-width: 880px) { .quotes-grid { grid-template-columns: 1fr; } }

    /* ===== Contact ===== */
    .contact-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; }
    .contact-info > p { color: var(--muted); font-size: 17px; margin: 12px 0 28px; }
    .contact-items { display: flex; flex-direction: column; gap: 14px; }
    .ci {
      display: flex; gap: 15px; align-items: center;
      padding: 16px 18px; background: var(--paper-soft);
      border: 1px solid var(--line); border-radius: 12px;
    }
    .ci-icon {
      width: 42px; height: 42px; border-radius: 9px; flex-shrink: 0;
      background: var(--logo-blue); color: var(--gold);
      display: flex; align-items: center; justify-content: center;
    }
    .ci-icon svg { width: 20px; height: 20px; }
    .ci-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 600; }
    .ci-value { font-size: 16px; font-weight: 600; color: var(--ink); }

    .form {
      background: var(--paper-soft); border: 1px solid var(--line);
      border-radius: 16px; padding: 34px;
    }
    .frow { margin-bottom: 18px; }
    .frow label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
    .frow input, .frow textarea, .frow select {
      width: 100%; padding: 13px 14px; border: 1px solid var(--line);
      border-radius: 8px; font-size: 15px; font-family: inherit;
      background: #fff; color: var(--ink); transition: border-color .15s;
    }
    .frow input:focus, .frow textarea:focus, .frow select:focus { outline: none; border-color: var(--navy); }
    .frow textarea { resize: vertical; min-height: 110px; }
    @media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; gap: 36px; } }

    /* ===== Footer ===== */
    .site-footer { background: var(--logo-blue); color: rgba(255,255,255,0.82); padding: 70px 0 30px; }
    .footer-top { display: flex; align-items: center; gap: 28px; margin-bottom: 48px; }
    .footer-top .brand-text { color: #fff; }
    .footer-logo { display: inline-flex; background: #fff; border-radius: 12px; padding: 12px 20px; flex-shrink: 0; }
    .footer-logo img { height: 68px; width: auto; display: block; }
    .footer-membership { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
    .footer-membership .fm-text { font-size: 13.5px; color: rgba(255,255,255,0.7); max-width: 140px; line-height: 1.35; }
    .footer-membership .fm-logo { display: inline-flex; background: #fff; border-radius: 12px; padding: 12px 18px; }
    .footer-membership .fm-logo img { height: 46px; width: auto; display: block; }
    @media (max-width: 720px) {
      .footer-top { flex-direction: column; align-items: center; text-align: center; gap: 18px; }
      .footer-top .rule { display: none; }
      .footer-membership { flex-direction: column; align-items: center; gap: 8px; margin-left: 0; }
    }
    .footer-top .rule { flex: 1; height: 1px; background: rgba(255,255,255,0.16); }
    .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
    .footer-brand p { font-size: 14.5px; color: rgba(255,255,255,0.62); max-width: 340px; }
    .footer-col h5 { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
    .footer-col a, .footer-col li { color: rgba(255,255,255,0.7); font-size: 14.5px; transition: color .15s; }
    .footer-col a:hover { color: var(--gold-light); }
    .footer-bottom {
      padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12);
      display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 14px; font-size: 13.5px; color: rgba(255,255,255,0.55);
    }
    .footer-bottom a { color: rgba(255,255,255,0.72); margin-left: 18px; }
    .footer-bottom a:hover { color: var(--gold-light); }
    @media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; } }
    @media (max-width: 520px) {
      .footer-grid { grid-template-columns: 1fr; }
      .footer-bottom { justify-content: center; text-align: center; }
      .footer-bottom a { margin: 0 9px; }
    }

    /* ===== Subpage hero (compact, single column) ===== */
    .hero.hero--compact .wrap {
      grid-template-columns: 1fr; min-height: 0;
      padding-top: 116px; padding-bottom: 64px;
    }
    .hero.hero--compact .hero-inner { max-width: 720px; }
    .hero.hero--compact h1 { font-size: clamp(34px, 5vw, 60px); margin-bottom: 18px; }

    /* ===== Outline (dark) button ===== */
    .btn-line { background: transparent; color: var(--navy); border: 1px solid #cfd6e6; }
    .btn-line:hover { background: var(--paper-soft); border-color: var(--navy); }

    /* ===== Job listings ===== */
    .job {
      background: #fff; border: 1px solid var(--line); border-radius: 16px;
      padding: 34px 36px; box-shadow: 0 14px 40px rgba(19,31,68,0.06);
      margin-bottom: 28px;
    }
    .job-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
    .tag {
      font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--logo-blue); background: rgba(16,40,130,0.07);
      border: 1px solid rgba(16,40,130,0.16); padding: 4px 11px; border-radius: 999px;
    }
    .job h3 { font-size: 24px; font-weight: 800; color: var(--navy); margin-bottom: 10px; }
    .job > p { color: var(--muted); font-size: 15.5px; margin-bottom: 24px; max-width: 800px; }
    .job-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 26px; }
    .job-col h4 {
      font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--logo-blue); margin-bottom: 14px;
    }
    .job-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .job-list li { font-size: 15px; color: var(--ink); display: flex; gap: 9px; align-items: flex-start; }
    .job-list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-top: 8px; flex-shrink: 0; }
    .job-actions { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--line); }
    @media (max-width: 640px) { .job { padding: 28px 24px; } .job-cols { grid-template-columns: 1fr; gap: 22px; } }

    /* ===== Bewerbungsformular ===== */
    .apply-form { max-width: 680px; margin: 0 auto; }
    .frow-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .fhint { font-weight: 400; color: var(--muted); font-size: 12px; }
    .apply-form input[type="file"] {
      width: 100%; padding: 10px 12px; font-size: 14px; color: var(--ink);
      background: #fff; border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
    }
    .apply-form input[type="file"]::file-selector-button {
      border: none; background: var(--logo-blue); color: #fff;
      padding: 8px 14px; margin-right: 12px; border-radius: 6px;
      font-family: inherit; font-weight: 600; font-size: 13px; cursor: pointer;
      transition: background .2s;
    }
    .apply-form input[type="file"]::file-selector-button:hover { background: var(--logo-blue-deep); }
    @media (max-width: 560px) { .frow-2 { grid-template-columns: 1fr; gap: 0; } }

    /* ===== FAQ (accordion) ===== */
    .faq { background: var(--paper-soft); border-top: 1px solid var(--line); }
    .faq-list { max-width: 900px; margin: 0 auto; }
    .faq-item { border-bottom: 1px solid var(--line); }
    .faq-item:first-child { border-top: 1px solid var(--line); }
    .faq-item summary {
      cursor: pointer; list-style: none; outline: none;
      display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
      padding: 22px 4px;
      font-family: 'Inter', sans-serif; font-weight: 700; font-size: 18px;
      letter-spacing: -0.01em; color: var(--navy); transition: color .15s;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary:hover { color: var(--logo-blue); }
    .faq-item[open] summary { color: var(--logo-blue); }
    .faq-icon { position: relative; flex-shrink: 0; width: 22px; height: 22px; margin-top: 3px; }
    .faq-icon::before, .faq-icon::after {
      content: ''; position: absolute; background: var(--gold); border-radius: 2px; transition: transform .22s ease;
    }
    .faq-icon::before { top: 10px; left: 3px; width: 16px; height: 2px; }
    .faq-icon::after  { left: 10px; top: 3px; width: 2px; height: 16px; }
    .faq-item[open] .faq-icon::after { transform: rotate(90deg); }
    .faq-answer { padding: 0 4px 24px; color: var(--muted); font-size: 15.5px; line-height: 1.7; max-width: 800px; }
    @media (max-width: 600px) { .faq-item summary { font-size: 16.5px; } }

    /* ===== Partnerschaft (Stonex) ===== */
    .partner { background: #fff; }
    .partner .sec-head h2 { flex-shrink: 1; min-width: 0; }
    @media (max-width: 600px) { .partner .sec-head h2 { font-size: 20px; line-height: 1.25; } }
    .partner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
    .partner-lead { font-size: 18px; color: var(--muted); line-height: 1.65; margin-bottom: 26px; }
    .partner-lead strong { color: var(--navy); font-weight: 600; }
    .partner-list { list-style: none; display: flex; flex-direction: column; gap: 13px; }
    .partner-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 16px; color: var(--ink); }
    .partner-list li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-top: 9px; flex-shrink: 0; }
    .partner-card {
      background: var(--paper-soft); border: 1px solid var(--line); border-radius: 18px;
      padding: 44px 40px; display: flex; flex-direction: column; align-items: center; gap: 20px;
      box-shadow: 0 18px 44px rgba(19,31,68,0.07);
    }
    .partner-shot { width: auto; max-width: 100%; max-height: 440px; height: auto; filter: drop-shadow(0 20px 34px rgba(0,0,0,0.2)); }
    .partner-caption { font-size: 16px; font-weight: 700; color: var(--navy); }
    .partner-cta-row { margin-top: 28px; }
    .partner-cobrand { width: 100%; max-width: 440px; height: auto; margin-top: 30px; }
    .partner-badge {
      font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--logo-blue); background: rgba(16,40,130,0.07);
      border: 1px solid rgba(16,40,130,0.16); padding: 6px 14px; border-radius: 999px;
    }
    @media (max-width: 880px) { .partner-grid { grid-template-columns: 1fr; gap: 34px; } .partner-card { padding: 34px 26px; } }

    /* ===== Legal pages (Impressum / Datenschutz) ===== */
    .legal-content { max-width: 840px; }
    .legal-content h2 { font-size: 22px; font-weight: 800; color: var(--navy); margin: 36px 0 10px; letter-spacing: -0.01em; }
    .legal-content h2:first-child { margin-top: 0; }
    .legal-content h3 { font-size: 16.5px; font-weight: 700; color: var(--navy); margin: 22px 0 8px; }
    .legal-content p { color: var(--muted); font-size: 15.5px; line-height: 1.7; margin-bottom: 14px; }
    .legal-content ul { padding-left: 20px; margin: 0 0 14px; }
    .legal-content li { color: var(--muted); font-size: 15.5px; line-height: 1.7; margin-bottom: 6px; }
    .legal-content a { color: var(--logo-blue); text-decoration: underline; }
    .legal-content a.btn { text-decoration: none; }
    .legal-content a.btn-navy { color: #fff; }
    .legal-content a.btn-white { color: var(--navy-dark); }
    .legal-content strong { color: var(--ink); font-weight: 600; }
    .legal-content .legal-updated { font-size: 13.5px; color: var(--text-muted, #5c6478); margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); }

    /* ===== WhatsApp Floating Button ===== */
    .wa-fab {
      position: fixed; bottom: 24px; right: 24px;
      width: 60px; height: 60px; background: #25D366; color: #fff;
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      box-shadow: 0 8px 24px rgba(37,211,102,0.35), 0 4px 12px rgba(0,0,0,0.18);
      z-index: 9000; text-decoration: none;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .wa-fab:hover { transform: scale(1.08); box-shadow: 0 12px 28px rgba(37,211,102,0.5), 0 6px 14px rgba(0,0,0,0.22); }
    .wa-fab svg { width: 32px; height: 32px; display: block; position: relative; z-index: 1; }
    .wa-fab::before {
      content: ''; position: absolute; inset: 0; border-radius: 50%;
      background: #25D366; animation: wa-pulse 2.4s ease-out infinite; z-index: 0;
    }
    @keyframes wa-pulse {
      0%   { transform: scale(1);   opacity: 0.55; }
      100% { transform: scale(1.7); opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) { .wa-fab::before { animation: none; opacity: 0; } }
    @media (max-width: 480px) {
      .wa-fab { bottom: 18px; right: 18px; width: 56px; height: 56px; }
      .wa-fab svg { width: 28px; height: 28px; }
    }