@font-face{font-family:'Quicksand';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/quicksand-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/quicksand-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/quicksand-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/quicksand-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-latin-700-normal.woff2') format('woff2');}
    a.nav-link{text-decoration:none;}
    a.btn{text-decoration:none;}


    /* === Self-hosted Fonts (Quicksand + Inter, lokal eingebettet) === */
    
    
    
    
    
    
    
    

    :root {
      --bg: #f7f8fa;
      --surface: #ffffff;
      --surface-soft: #fbfbfc;
      --navy: #0c1424;
      --navy-2: #13203a;
      --navy-3: #0a1220;
      --text: #667892;
      --heading: #0f1d34;
      --muted: #7b8aa0;
      --line: #edf1f5;
      --accent: #0e7e95;
      --accent-soft: rgba(14,126,149,0.1);
      --shadow-soft: 0 12px 30px rgba(15, 29, 52, 0.055);
      --shadow-hero: 0 30px 90px rgba(0,0,0,0.38);
      --max: 1200px;
      --radius: 12px;
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body {
      font-family: 'Inter', Arial, sans-serif;
      background: #dde4ed;
      color: var(--text);
      line-height: 1.75;
      letter-spacing: 0.01em;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button { font: inherit; }

    .container {
      width: min(calc(100% - 2rem), var(--max));
      margin: 0 auto;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 100;
      background: linear-gradient(90deg, rgba(10,18,32,0.98), rgba(19,32,58,0.98));
      border-bottom: 1px solid rgba(255,255,255,0.06);
      backdrop-filter: blur(10px);
    }

    .nav {
      min-height: 78px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .brand-mark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
    }

    .brand-logo {
      width: 140px;
      height: auto;
      display: block;
      filter: brightness(0) invert(1);
      opacity: 0.98;
    }

    .brand-copy {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .brand strong {
      color: #fff;
      font-size: 1.05rem;
      letter-spacing: 0.01em;
    }

    .brand span {
      color: rgba(255,255,255,0.72);
      font-size: 0.88rem;
    }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .nav-link, .tab-btn {
      border: 0;
      background: transparent;
      color: rgba(255,255,255,0.8);
      font-size: 0.86rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 11px 14px;
      border-radius: 999px;
      cursor: pointer;
      transition: 0.2s ease;
    }

    .nav-link:hover, .tab-btn:hover {
      color: #fff;
      background: rgba(255,255,255,0.06);
    }

    .nav-link.active, .tab-btn.active {
      color: var(--accent);
      background: rgba(255,255,255,0.04);
    }

    .page { display: none; min-height: calc(100vh - 78px); }
    .page.active { display: block; animation: fadeIn 0.28s ease; }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .hero {
      padding: 36px 0 42px;
      background: #dde4ed;
    }

    .hero-main {
      position: relative;
      overflow: hidden;
      border-radius: 34px;
      padding: 42px;
      min-height: 760px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 32px;
      align-items: stretch;
      color: #fff;
      background: none;
      box-shadow: var(--shadow-hero);
    }

    .hero-main::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
    }

    .hero-content, .hero-visual {
      display: none;
    }
    .hero-content {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding-right: 0;
      max-width: 620px;
    }
    .hero-visual {
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      padding-right: 8px;
      padding-bottom: 24px;
      padding-top: 120px;
    }

    .eyebrow {
      display: inline-flex;
      margin-bottom: 22px;
      padding: 10px 16px;
      border-radius: 999px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.92);
      font-size: 0.92rem;
      font-weight: 700;
      width: fit-content;
    }

    h1, h2, h3, h4 {
      font-family: 'Quicksand', 'Segoe UI', sans-serif;
      color: var(--heading);
      margin: 0;
    }

    .hero h1 {
      color: #f4efe9;
      font-size: clamp(3.15rem, 6.2vw, 4.95rem);
      line-height: 0.94;
      letter-spacing: -0.06em;
      max-width: 470px;
      margin-bottom: 8px;
      font-weight: 800;
    }

    .hero p {
      display: none;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-top: auto;
      margin-bottom: 0;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 14px 22px;
      border-radius: 10px;
      font-weight: 700;
      transition: 0.2s ease;
      border: 1px solid transparent;
      cursor: pointer;
      letter-spacing: 0.02em;
    }

    .btn-primary {
      background: var(--accent);
      color: #04101d;
    }

    .btn-secondary {
      background: transparent;
      color: #fff;
      border-color: rgba(255,255,255,0.16);
    }

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

    .hero-points {
      display: none;
    }

    .hero-info-card {
      width: 372px;
      max-width: 100%;
      background: rgba(3, 10, 20, 0.74);
      border: 1px solid rgba(14, 126, 149, 0.12);
      border-radius: 28px;
      padding: 28px 26px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
      backdrop-filter: blur(6px);
    }

    .hero-info-card h3 {
      color: #cbe8ef;
      font-size: 1.8rem;
      line-height: 1.1;
      margin-bottom: 12px;
    }

    .hero-info-card p {
      color: rgba(255,255,255,0.84);
      max-width: none;
      margin-bottom: 16px;
      font-size: 0.98rem;
      display: block;
    }

    .bullet-list {
      list-style: none;
      padding: 0;
      margin: 18px 0 0;
      display: grid;
      gap: 12px;
    }

    .bullet-list li {
      display: flex;
      gap: 12px;
      color: rgba(255,255,255,0.92);
      align-items: flex-start;
      font-size: 0.98rem;
    }

    .bullet-list li::before {
      content: "✓";
      width: 22px;
      height: 22px;
      border-radius: 50%;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(14,126,149,0.12);
      color: #a9dde9;
      font-weight: 700;
      margin-top: 1px;
    }

    .section {
      padding: 92px 0;
      background: #fff;
    }

    .section-alt {
      background: var(--surface-soft);
    }

    .section-head {
      display: block;
      text-align: center;
      margin-bottom: 46px;
    }

    .label {
      display: inline-flex;
      margin-bottom: 12px;
      padding: 8px 12px;
      border-radius: 999px;
      background: var(--accent-soft);
      color: #0a5c6d;
      font-size: 0.8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    h2 {
      font-size: clamp(3rem, 5vw, 4.2rem);
      line-height: 1;
      letter-spacing: -0.04em;
      margin-bottom: 12px;
    }

    .lead {
      margin: 0 auto;
      max-width: 760px;
      color: var(--muted);
      font-size: 1.04rem;
    }

    .grid-3, .services-grid, .values-grid, .contact-grid, .teaser-grid, .long-copy {
      display: grid;
      gap: 28px;
    }

    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .services-grid { grid-template-columns: repeat(3, 1fr); max-width: 1080px; margin: 0 auto; }
    .values-grid { grid-template-columns: repeat(3, 1fr); max-width: 1080px; margin: 0 auto; }
    .contact-grid { grid-template-columns: 0.9fr 1.1fr; }
    .teaser-grid { grid-template-columns: repeat(3, 1fr); }
    .long-copy { grid-template-columns: 1fr 1fr; }

    .card, .copy-box {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 30px;
      box-shadow: var(--shadow-soft);
    }

    .card.text-center { text-align: center; }

    .icon-circle {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      margin: 0 auto 24px;
      background: var(--accent-soft);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
      font-size: 28px;
      font-weight: 700;
    }

    .card h3, .copy-box h3 {
      font-size: 1.6rem;
      margin-bottom: 12px;
    }

    .card p, .copy-box p, .copy-box li, .contact-card p {
      color: var(--text);
    }

    .copy-box p { margin-bottom: 14px; }
    .copy-box ul { margin: 0; padding-left: 18px; }
    .copy-box li + li { margin-top: 8px; }

    .service-grid-button {
      text-align: center;
      margin-top: 42px;
    }

    .dark-band {
      background: linear-gradient(90deg, var(--navy), var(--navy-2));
      color: #fff;
    }

    .dark-band h2, .dark-band h3 { color: #f5efe8; }

    .about-intro {
      padding: 92px 0 72px;
      background: linear-gradient(90deg, var(--navy), var(--navy-2));
      color: #fff;
    }

    .about-header {
      text-align: center;
      margin-bottom: 70px;
    }

    .about-header h2 {
      color: #f5efe8;
      margin-bottom: 14px;
    }

    .about-header p {
      color: rgba(255,255,255,0.68);
      max-width: 650px;
      margin: 0 auto;
      font-size: 1.04rem;
    }

    .about-copy {
      max-width: 860px;
      margin: 0 auto;
      font-size: 1.05rem;
      line-height: 1.9;
      color: rgba(255,255,255,0.84);
    }

    .about-copy p { margin: 0 0 24px; }

    .about-quote {
      text-align: center;
      color: var(--accent);
      font-family: 'Quicksand', 'Segoe UI', sans-serif;
      font-style: italic;
      font-size: 1.95rem;
      margin: 0 0 40px;
    }

    .accent-inline {
      color: var(--accent);
      font-weight: 700;
    }

    .value-card {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 24px;
    }

    .value-icon {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      background: var(--accent-soft);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 20px;
      font-weight: 700;
    }

    .value-card h4 {
      font-family: 'Inter', Arial, sans-serif;
      font-size: 1.06rem;
      margin-bottom: 4px;
      color: var(--heading);
    }

    .value-card p {
      margin: 0;
      font-size: 0.95rem;
      color: var(--text);
    }

    .subnav {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 34px 0 34px;
    }

    .subnav .tab-btn {
      color: var(--heading);
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 999px;
      letter-spacing: 0.02em;
      text-transform: none;
      font-size: 0.95rem;
      padding: 12px 16px;
    }

    .subnav .tab-btn:hover {
      background: var(--accent-soft);
      color: var(--heading);
    }

    .subnav .tab-btn.active {
      background: var(--heading);
      color: #fff;
      border-color: var(--heading);
    }

    .cta-band {
      margin-top: 34px;
      padding: 38px;
      background: linear-gradient(90deg, var(--navy), var(--navy-2));
      color: #fff;
      border-radius: var(--radius);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
    }

    .cta-band h3 {
      color: #fff;
      font-size: 2rem;
      margin-bottom: 8px;
    }

    .cta-band p {
      margin: 0;
      color: rgba(255,255,255,0.8);
      max-width: 760px;
    }

    .contact-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 30px;
      box-shadow: var(--shadow-soft);
    }

    .contact-list {
      display: grid;
      gap: 18px;
      margin-top: 22px;
    }

    .contact-item strong {
      display: block;
      color: var(--heading);
      margin-bottom: 4px;
      font-family: 'Quicksand', 'Segoe UI', sans-serif;
      font-size: 1.35rem;
    }

    .form { display: grid; gap: 16px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

    label {
      display: block;
      margin-bottom: 8px;
      color: var(--heading);
      font-weight: 700;
      font-size: 0.94rem;
    }

    input, textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: var(--text);
      padding: 14px 16px;
      font: inherit;
      font-family: 'Inter', Arial, sans-serif;
    }

    input:focus, textarea:focus {
      outline: 2px solid rgba(14,126,149,0.16);
      border-color: var(--accent);
    }

    textarea { min-height: 160px; resize: vertical; }

    .footer {
      padding: 48px 0 52px;
      color: rgba(255,255,255,0.76);
      background:
        linear-gradient(90deg, rgba(5,11,22,0.98), rgba(9,20,39,0.98) 42%, rgba(9,28,59,0.98));
      font-size: 0.96rem;
      position: relative;
      overflow: hidden;
    }

    .footer::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(14,126,149,0.03), transparent 35%, transparent 65%, rgba(14,126,149,0.03));
      pointer-events: none;
    }

    .footer-mini-logo {
      width: 58px;
      height: 58px;
      border-radius: 14px;
      object-fit: cover;
      display: block;
      background: rgba(255,255,255,0.98);
      padding: 4px;
      box-shadow: 0 12px 28px rgba(0,0,0,0.20);
      border: 1px solid rgba(255,255,255,0.18);
    }

    .footer-inner {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      border-top: 1px solid rgba(255,255,255,0.08);
      padding-top: 22px;
    }

    @media (max-width: 1100px) {
      .hero-main, .services-grid, .values-grid, .teaser-grid, .contact-grid, .long-copy {
        grid-template-columns: 1fr 1fr;
      }
      .hero-main {
        grid-template-columns: 1fr;
        min-height: auto;
      }
      .hero-content { padding-right: 0; }
      .hero-visual { display: none; }
    }

    @media (max-width: 980px) {
      .home-contact-grid { grid-template-columns: 1fr; }

      .legal-meta { grid-template-columns: 1fr; }

      .section { padding: 86px 0; }

      .locations-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 860px) {
      .home-contact-box { padding: 28px 22px 24px; }
      .home-contact-box .btn { width: 100%; min-width: 0; }

      .footer {
        padding: 40px 0 44px;
      }

      .footer-inner {
        padding-top: 24px;
      }

      .services-intro-panel {
        padding: 22px;
        margin-bottom: 26px;
      }

      .page-services .services-grid .card,
      .page-services .copy-box {
        padding: 26px 22px 24px;
      }

      .page-services .subnav {
        justify-content: flex-start;
      }

      .hero h1 { max-width: 100%; }
      .section h2 { line-height: 1.12; }

      .brand-logo {
        width: 112px;
      }

      .nav {
        min-height: auto;
        padding: 14px 0;
        align-items: flex-start;
        flex-direction: column;
      }
      .nav-right, .services-grid, .values-grid, .teaser-grid, .contact-grid, .long-copy, .form-row, .cta-band {
        grid-template-columns: 1fr;
        display: grid;
      }
      .hero-main { padding: 30px 22px; }
      .hero h1 { font-size: clamp(2.8rem, 14vw, 4.15rem); max-width: 420px; }
      h2 { font-size: clamp(2.4rem, 10vw, 3.4rem); }
      .hero-info-card, .card, .copy-box, .contact-card, .cta-band { padding: 22px; }
      .section, .about-intro { padding: 68px 0; }
    }
  
    .page-home-services-white .card {
      background: #ffffff;
      border: 1px solid var(--line);
      box-shadow: var(--shadow-soft);
    }

  
    .locations-section {
      margin-top: 52px;
      padding-top: 12px;
    }

    .locations-head {
      margin-bottom: 22px;
    }

    .locations-head h3 {
      margin: 0 0 8px;
      font-size: 1.5rem;
      color: var(--heading);
    }

    .locations-head p {
      margin: 0;
      color: var(--muted);
    }

    .locations-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 28px;
    }

    .location-card {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-soft);
      overflow: hidden;
    }

    .location-map {
      width: 100%;
      height: 260px;
      border: 0;
      display: block;
      background: #e9eef4;
    }

    .location-body {
      padding: 28px;
    }

    .location-city {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      border-radius: 999px;
      background: var(--accent-soft);
      color: var(--accent);
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-bottom: 14px;
    }

    .location-body h4 {
      margin: 0 0 10px;
      font-size: 1.42rem;
      line-height: 1.25;
      color: var(--heading);
    }

    .location-body p {
      margin: 0 0 14px;
      color: var(--text);
    }

    .location-meta {
      display: grid;
      gap: 10px;
      margin-bottom: 18px;
    }

    .location-meta div {
      color: var(--text);
    }

    .location-meta strong {
      display: block;
      color: var(--heading);
      margin-bottom: 2px;
      font-size: 0.92rem;
    }

    .location-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .location-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 0 16px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--heading);
      font-weight: 600;
      transition: 0.2s ease;
    }

    .location-link:hover {
      border-color: rgba(14,126,149,0.35);
      color: var(--accent);
    }

  
    .page-services .section-head {
      max-width: 860px;
    }

    .page-services .section-head .lead {
      max-width: 760px;
    }

    .services-intro-panel {
      max-width: 980px;
      margin: 0 auto 34px;
      padding: 28px 30px;
      border-radius: 18px;
      background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(245,249,253,0.99));
      border: 1.5px solid rgba(15,29,52,0.10);
      box-shadow: 0 18px 36px rgba(15, 29, 52, 0.07);
    }

    .services-intro-panel p {
      margin: 0;
      color: var(--text);
      line-height: 1.85;
    }

    .page-services .services-grid {
      gap: 30px;
      margin-bottom: 18px;
    }

    .page-services .services-grid .card {
      position: relative;
      overflow: hidden;
      border-radius: 18px;
      padding: 34px 28px 30px;
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249,251,253,1));
      box-shadow: 0 18px 42px rgba(15, 29, 52, 0.07);
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .page-services .services-grid .card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto 0;
      height: 4px;
      background: linear-gradient(90deg, var(--accent), rgba(14,126,149,0.18));
    }

    .page-services .services-grid .card:hover {
      transform: translateY(-3px);
      box-shadow: 0 24px 52px rgba(15, 29, 52, 0.1);
      border-color: rgba(14,126,149,0.2);
    }

    .page-services .services-grid .icon-circle {
      width: 60px;
      height: 60px;
      margin-bottom: 20px;
      background: rgba(14,126,149,0.12);
      font-size: 24px;
    }

    .page-services .services-grid h3 {
      font-size: 1.26rem;
      margin-bottom: 10px;
    }

    .page-services .subnav {
      margin-top: 48px;
      margin-bottom: 30px;
      justify-content: center;
    }

    .page-services .subnav .tab-btn {
      min-height: 48px;
      padding: 0 18px;
      border-radius: 999px;
      background: rgba(255,255,255,0.86);
      box-shadow: 0 8px 20px rgba(15,29,52,0.04);
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .page-services .subnav .tab-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 14px 24px rgba(15,29,52,0.06);
    }

    .page-services .subnav .tab-btn.active {
      background: linear-gradient(135deg, var(--heading), #162844);
      box-shadow: 0 18px 28px rgba(15,29,52,0.18);
    }

    .page-services .service-tab {
      max-width: 1080px;
      margin: 0 auto;
    }

    .page-services .long-copy {
      gap: 30px;
    }

    .page-services .copy-box {
      position: relative;
      border-radius: 20px;
      padding: 34px 34px 30px;
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,252,1));
      box-shadow: 0 18px 42px rgba(15,29,52,0.06);
      border: 1px solid rgba(15,29,52,0.06);
    }

    .page-services .copy-box::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      border-radius: 20px 20px 0 0;
      background: linear-gradient(90deg, var(--accent), rgba(14,126,149,0.1));
    }

    .page-services .copy-box h3 {
      font-size: 1.5rem;
      margin-bottom: 14px;
    }

    .page-services .copy-box ul {
      padding-left: 20px;
    }

    .page-services .copy-box li {
      margin-bottom: 9px;
      line-height: 1.75;
    }

  
    .card,
    .copy-box,
    .location-card,
    .services-intro-panel,
    .hero-main,
    .btn,
    .location-link {
      transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease,
        background-color 0.22s ease,
        color 0.22s ease;
    }

    .card:hover,
    .copy-box:hover,
    .location-card:hover,
    .services-intro-panel:hover {
      transform: translateY(-4px);
      box-shadow: 0 24px 52px rgba(15, 29, 52, 0.10);
      border-color: rgba(14,126,149,0.18);
    }

    .hero-main:hover {
      transform: translateY(-2px);
      box-shadow: 0 36px 96px rgba(0,0,0,0.42);
    }

    .btn:hover,
    .location-link:hover {
      transform: translateY(-2px);
    }

    .tab-btn {
      transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
    }

    .page-services .services-grid .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 26px 56px rgba(15, 29, 52, 0.12);
      border-color: rgba(14,126,149,0.24);
    }

    .page-services .subnav .tab-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 26px rgba(15,29,52,0.08);
    }

    @media (prefers-reduced-motion: reduce) {
      .card,
      .copy-box,
      .location-card,
      .services-intro-panel,
      .hero-main,
      .btn,
      .location-link,
      .tab-btn {
        transition: none !important;
      }

      .card:hover,
      .copy-box:hover,
      .location-card:hover,
      .services-intro-panel:hover,
      .hero-main:hover,
      .btn:hover,
      .location-link:hover,
      .tab-btn:hover {
        transform: none !important;
      }
    }

  
    .card .icon-circle,
    .location-card .icon-circle,
    .copy-box .icon-circle {
      transition:
        background-color 0.22s ease,
        color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
    }

    .card:hover .icon-circle,
    .location-card:hover .icon-circle,
    .copy-box:hover .icon-circle {
      background: rgba(14,126,149,0.18);
      color: #0b6e83;
      box-shadow: 0 10px 24px rgba(14,126,149,0.14);
      transform: scale(1.04);
    }

  
    .footer-links {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      color: rgba(255,255,255,0.82);
    }

    .footer-links a {
      color: rgba(255,255,255,0.84);
      transition: color 0.2s ease, opacity 0.2s ease;
    }

    .footer-links a:hover {
      color: var(--accent);
    }

    .footer-links .sep {
      color: rgba(255,255,255,0.28);
    }

    .legal-wrap {
      max-width: 980px;
      margin: 0 auto;
      display: grid;
      gap: 28px;
    }

    .legal-card {
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,1));
      border: 1px solid rgba(15,29,52,0.08);
      border-radius: 22px;
      padding: 34px 34px 30px;
      box-shadow: 0 16px 34px rgba(15,29,52,0.06);
    }

    .legal-card h3 {
      margin: 0 0 14px;
      font-size: 1.45rem;
      line-height: 1.2;
      color: var(--heading);
    }

    .legal-card p,
    .legal-card li {
      color: var(--text);
      line-height: 1.85;
    }

    .legal-card p {
      margin: 0 0 14px;
    }

    .legal-card ul {
      margin: 0;
      padding-left: 20px;
    }

    .legal-meta {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 22px;
    }

    .legal-meta strong {
      display: block;
      margin-bottom: 4px;
      color: var(--heading);
    }

    .legal-note {
      font-size: 0.95rem;
      color: var(--muted);
    }

  
    .home-contact-band {
      background: linear-gradient(90deg, #0a1220, #10203a 55%, #0d2348);
      color: #fff;
      position: relative;
      overflow: hidden;
    }

    .home-contact-band::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(14,126,149,0.03), transparent 35%, transparent 65%, rgba(14,126,149,0.03));
      pointer-events: none;
    }

    .home-contact-head {
      position: relative;
      z-index: 1;
      text-align: center;
      max-width: 860px;
      margin: 0 auto 54px;
    }

    .home-contact-head h2 {
      color: #fff;
      margin-bottom: 16px;
    }

    .home-contact-head p {
      color: rgba(255,255,255,0.74);
      margin: 0 auto;
      max-width: 760px;
      line-height: 1.8;
    }

    .home-contact-grid {
      position: relative;
      z-index: 1;
      max-width: 980px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 28px;
    }

    .home-contact-box {
      border-radius: 22px;
      padding: 34px 30px 30px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.10);
      box-shadow: 0 18px 40px rgba(0,0,0,0.18);
      text-align: center;
    }

    .home-contact-icon {
      width: 82px;
      height: 82px;
      margin: 0 auto 22px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(14,126,149,0.12);
      border: 1px solid rgba(14,126,149,0.14);
      color: #ffffff;
      font-size: 2rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    }

    .home-contact-box h3 {
      margin: 0 0 12px;
      color: #fff;
      font-size: 1.9rem;
      line-height: 1.15;
      font-family: 'Quicksand', 'Segoe UI', sans-serif;
      letter-spacing: -0.02em;
    }

    .home-contact-box p {
      margin: 0 0 24px;
      color: rgba(255,255,255,0.72);
      line-height: 1.8;
      min-height: 58px;
    }

    .home-contact-meta {
      margin: 0 0 24px;
      color: #fff;
      font-weight: 600;
      font-size: 1.18rem;
    }

    .home-contact-meta a {
      color: #fff;
    }

    .home-contact-box .btn {
      min-width: 220px;
    }


    /* ===== V10 design refinement ===== */
    :root{
      --accent-2:#b4894a;                 /* brass: ledger signature */
      --accent-2-ink:#8a6326;             /* legible brass text */
      --accent-2-soft:rgba(180,137,74,0.14);
    }
    /* Hauptbuch-Linie: ruled-ledger eyebrow, the fiduciary artifact */
    .section-head .label,
    .contact-card .label,
    .locations-head .label{
      background:transparent;
      border-radius:0;
      padding:0 0 7px;
      color:var(--accent-2-ink);
      letter-spacing:0.2em;
      border-bottom:2px solid var(--accent-2);
    }
    .hero .eyebrow{
      background:transparent;
      border:0;
      border-bottom:2px solid var(--accent-2);
      border-radius:0;
      padding:0 0 8px;
      color:#efe4d2;
      letter-spacing:0.18em;
      text-transform:uppercase;
      font-size:0.82rem;
      font-weight:700;
    }
    /* SVG icon sizing */
    .icon-circle{font-size:0}
    .icon-circle svg{width:27px;height:27px;display:block}
    .value-icon svg{width:22px;height:22px;display:block}
    .home-contact-icon{font-size:0}
    .home-contact-icon svg{width:30px;height:30px;display:block}
    /* Brass ledger top-rule on service copy boxes */
    .page-services .copy-box::before{background:var(--accent-2);height:3px}
    /* Calmer, more precise card hover */
    .card:hover,.copy-box:hover,.location-card:hover,.services-intro-panel:hover{
      border-color:var(--accent-2-soft);
    }
    /* Buttons legible on matured teal */
    .btn-primary{color:#fff;font-weight:700;letter-spacing:0.03em}
    .btn-primary:hover{background:#0b6e83}
    /* Value icons: precise tile, brass on hover */
    .value-icon{border-radius:12px}
    .value-card:hover .value-icon{background:var(--accent-2-soft);color:var(--accent-2)}
    /* Accessible focus */
    a:focus-visible,button:focus-visible,.tab-btn:focus-visible,.nav-link:focus-visible{
      outline:2px solid var(--accent-2);
      outline-offset:3px;
      border-radius:6px;
    }

    /* ===== V12: gold icons + gold highlight text (on V10 base) ===== */
    :root{
      --gold:#bf9550;
      --gold-deep:#a87a35;
      --gold-soft:rgba(191,149,80,0.14);
    }
    /* Symbols above the text -> gold */
    .icon-circle{background:var(--gold-soft);color:var(--gold-deep)}
    .value-icon{background:var(--gold-soft);color:var(--gold-deep)}
    .card:hover .icon-circle,
    .location-card:hover .icon-circle,
    .copy-box:hover .icon-circle{
      background:rgba(191,149,80,0.22);
      color:var(--gold-deep);
      box-shadow:0 10px 24px rgba(191,149,80,0.18);
    }
    .value-card:hover .value-icon{background:rgba(191,149,80,0.22);color:var(--gold-deep)}
    /* Highlighted text + quote -> gold (like V11) */
    .accent-inline,.about-quote{color:var(--gold-deep)}
    /* Single location -> wide horizontal panel (map left, details right) */
    .locations-grid{grid-template-columns:1fr;max-width:none;margin:0}
    .locations-grid .location-card{display:grid;grid-template-columns:1.05fr 0.95fr;align-items:stretch}
    .locations-grid .location-map{height:100%;min-height:380px}
    .locations-grid .location-body{padding:38px 40px;align-self:center}
    @media (max-width:760px){
      .locations-grid .location-card{grid-template-columns:1fr}
      .locations-grid .location-map{min-height:240px;height:260px}
      .locations-grid .location-body{padding:26px 22px}
    }

    /* ===== V14: Quicksand (logo font) + brand + footer logo ===== */
    .hero h1{letter-spacing:-0.015em;font-weight:700}
    h2{letter-spacing:-0.005em;font-weight:700}
    .card h3,.copy-box h3,.hero-info-card h3,.cta-band h3{font-weight:600}
    .value-card h4,.location-body h4,.contact-item strong{font-weight:600}
    /* Brand: only "Treuhand", smaller, in the logo's font */
    .brand strong{
      font-family:'Quicksand',sans-serif;
      font-weight:600;
      font-size:0.78rem;
      letter-spacing:0.24em;
      text-transform:uppercase;
      color:rgba(255,255,255,0.86);
    }
    .brand-logo{width:128px}
    /* Footer logo: same lockup as header, white on the dark footer */
    .footer-mini-logo{
      width:132px;height:auto;border-radius:0;object-fit:initial;
      background:transparent;padding:0;box-shadow:none;border:0;
      filter:brightness(0) invert(1);opacity:0.95;
    }

    /* ===== V15: brand sub-line, smaller hero, column footer ===== */
    .brand-sub{
      font-family:'Quicksand',sans-serif;font-size:0.6rem;font-weight:500;
      letter-spacing:0.02em;color:rgba(255,255,255,0.58);text-transform:none;
      margin-top:3px;line-height:1.2;
    }
    .hero h1{
      font-size:clamp(1.8rem,3.2vw,2.5rem);line-height:1.14;
      letter-spacing:-0.01em;max-width:760px;font-weight:700;
    }
    .footer-top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px;padding-bottom:38px}
    .footer-logo{width:150px;height:auto;display:block;filter:brightness(0) invert(1);opacity:0.95;margin-bottom:18px}
    .footer-brand p{color:rgba(255,255,255,0.6);font-size:0.92rem;line-height:1.7;max-width:330px;margin:0}
    .footer-title{color:var(--gold);font-size:0.72rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;margin:0 0 16px;font-family:'Quicksand',sans-serif}
    .footer-col{display:flex;flex-direction:column;gap:12px}
    .footer-col a,.footer-col p{color:rgba(255,255,255,0.78);font-size:0.95rem;line-height:1.6;margin:0;text-decoration:none}
    .footer-col a{transition:color .2s ease}
    .footer-col a:hover{color:#e7c987}
    .footer-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,0.1);padding-top:24px;color:rgba(255,255,255,0.5);font-size:0.9rem}
    @media (max-width:860px){.footer-top{grid-template-columns:1fr 1fr;gap:30px}.footer-brand{grid-column:1 / -1}}
    @media (max-width:560px){.footer-top{grid-template-columns:1fr}}

    /* ===== V16: hero balance — group content, kill the void ===== */
    .hero{padding:30px 0 40px}
    .hero-main{min-height:540px;padding:50px 54px}
    .hero-content{justify-content:center;max-width:600px}
    .hero .eyebrow{margin-bottom:18px}
    .hero h1{margin-bottom:18px}
    .hero p{
      display:block;
      color:rgba(255,255,255,0.82);
      font-size:1.05rem;line-height:1.6;
      max-width:470px;margin:0 0 30px;
    }
    .hero-actions{margin-top:0}
    @media (max-width:860px){
      .hero-main{min-height:auto;padding:34px 24px}
      .hero p{font-size:1rem;max-width:100%}
    }

    /* ===== V18: full-bleed background hero (KOLI-style) ===== */
    .hero{
      padding:0;position:relative;min-height:88vh;
      display:flex;align-items:center;
      background:
        linear-gradient(90deg, rgba(5,11,20,0.86) 0%, rgba(5,11,20,0.62) 46%, rgba(5,11,20,0.32) 100%),
        url('images/hero.jpg') center center / cover no-repeat;
    }
    .hero .container{width:100%}
    .hero-main{background:none;border-radius:0;padding:0;min-height:auto;box-shadow:none;grid-template-columns:1fr;gap:0}
    .hero-main::after{display:none}
    .hero-content{padding:0;max-width:600px;justify-content:center}
    .hero h1{text-shadow:0 2px 24px rgba(0,0,0,0.38)}
    .hero p{text-shadow:0 1px 14px rgba(0,0,0,0.32)}
    @media (max-width:900px){ .hero{min-height:78vh} }

    /* ===== V19: hero text positioning — anchor left to viewport ===== */
    .hero{min-height:84vh}
    .hero .container{
      max-width:none;margin:0;width:100%;
      padding-left:clamp(28px,7vw,112px);
      padding-right:clamp(28px,7vw,112px);
    }
    .hero-content{max-width:600px;justify-content:center}
    .hero .eyebrow{margin-bottom:20px}
    .hero h1{margin-bottom:20px}
    .hero p{margin-bottom:32px}

    /* ===== V20: kill hero hover-rectangle + darken for readability ===== */
    .hero-main:hover{transform:none;box-shadow:none}
    .hero::before{
      content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
      background:linear-gradient(90deg,
        rgba(3,8,15,0.62) 0%,
        rgba(3,8,15,0.46) 34%,
        rgba(3,8,15,0.16) 64%,
        rgba(3,8,15,0) 100%);
    }
    .hero .container{position:relative;z-index:2}

    /* ===== V21: smaller section titles + tighter rhythm ===== */
    h2{font-size:clamp(1.85rem,3vw,2.7rem);line-height:1.14;letter-spacing:-0.01em}
    .section-head{margin-bottom:38px}
    .section{padding:80px 0}
    @media (max-width:860px){
      h2{font-size:clamp(1.65rem,5.5vw,2.05rem)}
      .section{padding:58px 0}
    }

    /* ===== V22: compact contact boxes ===== */
    .home-contact-box{padding:28px 26px 26px;border-radius:18px}
    .home-contact-icon{width:56px;height:56px;margin:0 auto 14px}
    .home-contact-icon svg{width:25px;height:25px}
    .home-contact-box h3{font-size:1.3rem;margin:0 0 8px}
    .home-contact-box p{line-height:1.55;min-height:0;margin:0 0 14px;font-size:0.95rem}
    .home-contact-meta{margin:0 0 16px}
    .home-contact-box .btn{min-width:0;padding:11px 22px}

    /* ===== V23: gold bullet markers in Leistungsinhalte lists ===== */
    .copy-box li::marker{color:var(--gold-deep)}

    /* ===== V24: contact->footer separation + gold accents in contact ===== */
    .footer{
      background:linear-gradient(180deg,#0a1828 0%,#081421 100%);
      border-top:1px solid rgba(191,149,80,0.32);
    }
    .home-contact-icon{background:rgba(191,149,80,0.16);color:#e7c987}
    .home-contact-meta,.home-contact-meta a{color:#e7c987}

    /* ===== V28: legal links in footer bottom bar ===== */
    .footer-legal{display:flex;gap:22px}
    .footer-legal a{color:rgba(255,255,255,0.55);text-decoration:none;transition:color .2s ease}
    .footer-legal a:hover{color:#e7c987}
  
    /* === V33: Gold-Hover Navigation + ANRUFEN-Button === */
    .nav-link:hover, .tab-btn:hover{
      color:#e7c987;
      background:rgba(231,201,135,0.08);
    }
    .call-btn{
      display:inline-flex; align-items:center; gap:8px;
      border:1.6px solid var(--gold); color:var(--gold);
      background:transparent;
      font-family:'Quicksand',sans-serif; font-size:0.82rem; font-weight:600;
      letter-spacing:0.1em; text-transform:uppercase;
      padding:10px 18px; border-radius:999px; cursor:pointer;
      text-decoration:none; transition:.2s ease; margin-left:6px; white-space:nowrap;
    }
    .call-btn:hover{
      background:var(--gold); color:var(--navy-3); border-color:var(--gold);
      box-shadow:0 6px 18px rgba(191,149,80,0.35);
    }
    .call-btn svg{ width:16px; height:16px; display:block; }
    @media (max-width:760px){ .call-btn{ justify-content:center; margin-left:0; } }

  
    /* === V34: Über-uns mit Leuchtturm-Hintergrund, Text links === */
    #page-team .about-intro{
      background:
        linear-gradient(90deg, rgba(6,12,24,0.98) 0%, rgba(6,12,24,0.90) 42%, rgba(6,12,24,0.70) 74%, rgba(6,12,24,0.60) 100%),
        url('images/leuchtturm.jpg');
      background-size:cover;
      background-position:right center;
      background-repeat:no-repeat;
      padding:104px 0 96px;
    }
    #page-team .about-intro .container{
      max-width:none;
      padding-left:clamp(18px,3.5vw,56px);
      padding-right:clamp(28px,6vw,80px);
    }
    #page-team .about-header{ text-align:left; margin-bottom:32px; max-width:660px; }
    #page-team .about-copy{ margin:0; max-width:600px; color:rgba(255,255,255,0.92); }
    #page-team .about-quote{ text-align:left; color:var(--gold); }
    @media (max-width:760px){
      #page-team .about-intro{ background-position:74% center; padding:74px 0 64px; }
      #page-team .about-header, #page-team .about-copy{ max-width:none; }
    }

  
    /* V35: klarere Lesbarkeit auf dem Bild */
    #page-team .about-header h2, #page-team .about-header p,
    #page-team .about-copy p, #page-team .about-quote{
      text-shadow:0 2px 16px rgba(4,9,18,0.6);
    }

  
    /* V36: Zitat als Schluss-Signatur */
    #page-team .about-quote-end{
      margin:38px 0 0;
      padding-top:26px;
      border-top:1px solid rgba(191,149,80,0.38);
      font-size:1.5rem;
      line-height:1.5;
      max-width:600px;
    }

/* === Sehr breite Bildschirme (27"/34"): Hero als zentrierte Card === */
@media (min-width:2000px){
  .hero{
    max-width:1700px;
    margin:48px auto;
    min-height:640px;
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 40px 90px rgba(15,29,52,0.22);
  }
}

/* === Kontaktformular: Consent / Hinweis / Honeypot === */
.form-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-consent{display:flex;gap:9px;align-items:flex-start;font-size:.86rem;line-height:1.5;color:var(--text);margin:2px 0 4px}
.form-consent input{margin-top:3px;flex:0 0 auto}
.form-consent a{color:var(--gold-deep);text-decoration:underline}
.form-hinweis{display:none}
.form-hinweis.ok{display:block;padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:.92rem;background:rgba(18,140,84,.12);color:#0b6b40;border:1px solid rgba(18,140,84,.35)}
.form-hinweis.err{display:block;padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:.92rem;background:rgba(190,60,60,.10);color:#a01e1e;border:1px solid rgba(190,60,60,.35)}

/* === Fix: DSGVO-Checkbox korrekt ausrichten (Checkbox nicht 100% breit) === */
.form-consent{display:flex;flex-direction:row;align-items:flex-start;gap:10px;width:100%;text-align:left;font-weight:400;font-size:.86rem;line-height:1.5;color:var(--text);margin:6px 0 2px}
.form-consent input[type="checkbox"]{
  -webkit-appearance:checkbox;appearance:auto;
  width:18px!important;height:18px!important;min-width:18px;flex:0 0 auto;
  padding:0!important;margin:2px 0 0!important;border-radius:4px;background:#fff;
}
.form-consent span{flex:1 1 auto;font-weight:400}

/* === Mobile-Navigation: Hamburger + Vollbild-Overlay (KOLI-Pattern, NeySel-Look) === */
.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;position:relative;z-index:140;padding:0}
.nav-toggle span{display:block;width:24px;height:2px;background:#fff;margin:5px auto;border-radius:2px;transition:transform .25s ease,opacity .25s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:900px){
  .topbar .container.nav{display:flex;align-items:center;justify-content:space-between}
  .topbar .brand{position:relative;z-index:140}
  .nav-toggle{display:block}
  .nav-right{
    position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;
    background:linear-gradient(180deg,#0c1424,#0a1220);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:6px;flex-wrap:nowrap;
    transform:translateX(100%);transition:transform .3s ease;
    z-index:130;padding-top:80px;
  }
  .nav-right.open{transform:translateX(0)}
  .nav-right .nav-link{font-size:1.15rem;padding:14px 22px;width:auto;text-align:center;background:transparent}
  .nav-right .call-btn{margin-top:20px;font-size:.95rem;padding:14px 30px}
}
@media (max-width:560px){ .brand-sub{display:none} }

/* === Fix: Mobile Header in EINER Reihe + Kacheln (.grid-3) untereinander === */
@media (max-width:900px){
  .topbar .container.nav{flex-direction:row !important;flex-wrap:nowrap;align-items:center;justify-content:space-between}
  .brand-logo{width:108px}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .grid-3, .home-contact-grid{grid-template-columns:1fr !important}
  .brand-logo{width:100px}
}

/* === Fix: KEIN horizontaler Overflow (kein Wischen zum Off-Canvas-Menü) === */
html{ overflow-x: hidden; }
@supports (overflow: clip){ html{ overflow-x: clip; } }

/* === Fix: kein horizontales Wischen zum ausgeblendeten Overlay-Menü === */
body{overflow-x:clip;max-width:100%;}
/* html NICHT clippen -> sonst bricht position:sticky beim Header! */


/* === Robustheit (KOLI-Abgleich): lange Woerter umbrechen + smooth scroll === */
html{scroll-behavior:smooth}
body{overflow-wrap:break-word;word-wrap:break-word}
h1,h2,h3,h4,.hero h1,.card p,.copy-box p,p,li,a{overflow-wrap:break-word}
h1,h2,.hero h1{hyphens:auto;-webkit-hyphens:auto}

/* === Sehr breite Bildschirme: Ueber-uns-Block ebenfalls als zentrierte Card === */
@media (min-width:2000px){
  #page-team .about-intro{
    max-width:1700px;
    margin:48px auto;
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 40px 90px rgba(15,29,52,0.22);
  }
}

/* === Bilder: kleinere Varianten auf Handy/Tablet laden (Ladezeit, KOLI-Niveau) === */
@media (max-width:900px){
  .hero{
    background-image:
      linear-gradient(90deg, rgba(5,11,20,0.86) 0%, rgba(5,11,20,0.62) 46%, rgba(5,11,20,0.32) 100%),
      url('images/hero-mobile.jpg');
  }
  #page-team .about-intro{
    background-image:
      linear-gradient(90deg, rgba(6,12,24,0.98) 0%, rgba(6,12,24,0.90) 42%, rgba(6,12,24,0.70) 74%, rgba(6,12,24,0.60) 100%),
      url('images/leuchtturm-mobile.jpg');
  }
}

/* === Mobile: Header scrollt normal weg, Burger-Button bleibt schwebend erreichbar === */
@media (max-width:900px){
  .topbar{position:relative;}                 /* Header klebt NICHT mehr */
  .nav-toggle{
    position:fixed;top:14px;right:14px;
    width:46px;height:46px;border-radius:12px;
    background:rgba(10,18,32,0.82);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border:1px solid rgba(231,201,135,0.35);
    box-shadow:0 6px 20px rgba(0,0,0,0.28);
    z-index:150;
  }
  .nav-right{z-index:145}                     /* Overlay unter dem Burger */
}