html,
      body {
          background: #1f3554;
          /* dein Navy */
      }

      *,
      *::before,
      *::after {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
      }

      .impressum-block {
          max-width: 800px;
          margin: 60px auto;
          background: var(--white);
          padding: 40px;
          border-radius: 16px;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
          border: 1px solid var(--border);
      }

      .impressum-block h1 {
          margin-bottom: 30px;
          font-size: 28px;
      }

      .impressum-section {
          margin-bottom: 25px;
      }

      .impressum-section h2 {
          font-size: 16px;
          margin-bottom: 8px;
          color: var(--navy);
      }

      .impressum-section p {
          color: var(--muted);
          line-height: 1.6;
      }

      .trust-item {
          font-weight: 700;
          color: red;
      }


      /* ===============================
   GLOBALER LAYOUT-CONTAINER
   =============================== */

      .page-wrap {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 16px;
      }

      :root {
          --navy: #294367;
          --blue: #1a4a7a;
          --mid: #2563a8;
          --accent: #a4cbe0;

          --bg-main: #0f2744;
          --light-bg: #1f3554;

          --white: #1f3554;
          --text: #ffffff;
          --muted: #a4b7cc;

          --border: rgba(255, 255, 255, 0.08);
      }

      /* EINHEITLICH */
      html,
      body {
          background: var(--bg-main);
      }

      body {
          font-family: 'DM Sans', sans-serif;
          color: var(--text);
      }




      .nav-logo img {
          height: 40px;
      }

      .nav-menu {
          display: flex;
          gap: 12px;
      }

      .nav-btn {
          background: var(--accent);
          color: var(--navy);
          padding: 10px 16px;
          border-radius: 10px;
          text-decoration: none;
          font-weight: 600;
          font-size: 14px;
          white-space: nowrap;
      }

      .nav-btn:hover {
          opacity: 0.85;
      }

      .hero {
          margin-top: 0 !important;
      }

      /* HERO */
      .hero {
          min-height: auto;
          background: var(--navy);
          display: flex;
          align-items: flex-start;
          justify-content: center;
          text-align: center;
          padding: 120px 5% 80px;
          position: relative;
          overflow: hidden;
      }

      .hero-image-wrap {
          margin-top: 40px;
          /* Abstand zu Buttons */
          display: flex;
          justify-content: center;
      }

      .hero-image-wrap img {
          width: 100%;
          /* 🔥 passt sich immer an */
          max-width: 420px;
          /* begrenzt auf Desktop */
          height: auto;
      }



      .hero::before {
          content: '';
          position: absolute;
          top: -200px;
          left: 50%;
          transform: translateX(-50%);
          width: 900px;
          height: 900px;
          background: radial-gradient(circle, rgba(37, 99, 168, 0.35) 0%, transparent 70%);
          pointer-events: none;
      }

      .hero-badge {
          display: inline-block;
          background: rgba(232, 168, 32, 0.15);
          border: 1px solid rgba(232, 168, 32, 0.4);
          color: var(--accent);
          font-size: 12px;
          font-weight: 600;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 6px 16px;
          border-radius: 20px;
          margin-bottom: 28px;
          animation: fadeUp 0.6s ease both;
      }

      .hero h1 {
          font-family: 'DM Serif Display', serif;
          font-size: clamp(48px, 7vw, 88px);
          color: var(--white);
          line-height: 1.05;
          margin-bottom: 24px;
          animation: fadeUp 0.7s 0.1s ease both;
      }

      .hero h1 em {
          font-style: italic;
          color: var(--accent);
      }

      .hero p {
          font-size: clamp(16px, 2vw, 19px);
          color: rgba(255, 255, 255, 0.65);
          max-width: 560px;
          margin: 0 auto 40px;
          line-height: 1.7;
          animation: fadeUp 0.7s 0.2s ease both;
      }

      .hero-cta {
          display: flex;
          gap: 14px;
          justify-content: center;
          flex-wrap: wrap;
          animation: fadeUp 0.7s 0.3s ease both;
      }

      .btn-primary {
          text-decoration: none;
          background: var(--accent);
          color: var(--navy);
          padding: 15px 32px;
          border-radius: 8px;
          font-weight: 700;
          font-size: 15px;
          text-decoration: none;
          transition: transform 0.2s, box-shadow 0.2s;
          box-shadow: 0 4px 20px rgba(232, 168, 32, 0.35);
      }

      .btn-primary:hover {
          text-decoration: none;
          transform: translateY(-2px);
          box-shadow: 0 8px 30px rgba(232, 168, 32, 0.45);
      }

      .btn-secondary {
          background: rgba(255, 255, 255, 0.08);
          color: rgba(255, 255, 255, 0.85);
          padding: 15px 32px;
          border-radius: 8px;
          font-weight: 500;
          font-size: 15px;
          text-decoration: none;
          border: 1px solid rgba(255, 255, 255, 0.15);
          transition: background 0.2s;
      }

      .btn-secondary:hover {
          background: rgba(255, 255, 255, 0.13);
      }

      /* TRUST BAR */
      .trust-bar {
          background: var(--light-bg);
          border-bottom: 1px solid var(--border);
          padding: 22px 5%;
          display: flex;
          justify-content: center;
          gap: 48px;
          flex-wrap: wrap;
      }

      .trust-item {
          display: flex;
          align-items: center;
          gap: 10px;
          color: var(--muted);
          font-size: 14px;
          font-weight: 700;
      }

      .trust-item svg {
          color: var(--mid);
          flex-shrink: 0;
      }

      /* SECTIONS */
      .section {
          padding: 90px 5%;
          max-width: 1160px;
          margin: 0 auto;
      }

      .section-label {
          text-align: center;
          font-size: 12px;
          font-weight: 600;
          letter-spacing: 2.5px;
          text-transform: uppercase;
          color: var(--mid);
          margin-bottom: 14px;
      }

      .section-title {
          font-family: 'DM Serif Display', serif;
          font-size: clamp(30px, 4vw, 44px);
          text-align: center;
          color: var(--navy);
          line-height: 1.15;
          margin-bottom: 16px;
      }

      .section-sub {
          text-align: center;
          color: var(--muted);
          font-size: 17px;
          max-width: 580px;
          margin: 0 auto 60px;
          line-height: 1.7;
      }

      /* WHY CARDS */
      .why-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 24px;
      }

      .why-card {
          background: var(--navy);
          border-radius: 16px;
          padding: 36px 32px;
          color: white;
          position: relative;
          overflow: hidden;
          transition: transform 0.25s;
      }

      .why-card:hover {
          transform: translateY(-4px);
      }

      .why-card::after {
          content: '';
          position: absolute;
          bottom: 0;
          right: 0;
          width: 120px;
          height: 120px;
          background: radial-gradient(circle at bottom right, rgba(37, 99, 168, 0.5), transparent 70%);
      }

      .why-icon {
          width: 48px;
          height: 48px;
          background: rgba(232, 168, 32, 0.15);
          border: 1px solid rgba(232, 168, 32, 0.3);
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 20px;
      }

      .why-card h3 {
          font-family: 'DM Serif Display', serif;
          font-size: 22px;
          margin-bottom: 12px;
          color: white;
      }

      .why-card p {
          color: rgba(255, 255, 255, 0.6);
          font-size: 15px;
          line-height: 1.65;
      }

      /* FEATURES */
      .features-bg {
          background: var(--light-bg);
      }

      .features-wrap {
          padding: 90px 5%;
          max-width: 1160px;
          margin: 0 auto;
      }

      .features-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
          gap: 20px;
      }

      .feature-card {
          background: var(--white);
          border: 1px solid var(--border);
          border-radius: 14px;
          padding: 28px 26px;
          transition: box-shadow 0.2s, transform 0.2s;
      }

      .feature-card:hover {
          box-shadow: 0 8px 30px rgba(14, 35, 64, 0.1);
          transform: translateY(-3px);
      }

      .feat-icon {
          width: 42px;
          height: 42px;
          background: #e8f0fb;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 16px;
      }

      .feature-card h3 {
          font-weight: 600;
          font-size: 16px;
          color: var(--navy);
          margin-bottom: 8px;
      }

      .feature-card p {
          color: var(--muted);
          font-size: 14px;
          line-height: 1.6;
      }

      /* WORKFLOW */
      .workflow-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 60px;
          align-items: center;
      }

      @media (max-width: 768px) {
          .workflow-grid {
              grid-template-columns: 1fr;
          }
      }

      .workflow-steps {
          display: flex;
          flex-direction: column;
          gap: 0;
      }

      .workflow-step {
          display: flex;
          gap: 20px;
          align-items: flex-start;
          padding: 20px 0;
          border-bottom: 1px solid var(--border);
      }

      .workflow-step:last-child {
          border-bottom: none;
      }

      .step-num {
          width: 36px;
          height: 36px;
          background: var(--navy);
          color: white;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 13px;
          font-weight: 700;
          flex-shrink: 0;
      }

      .step-text strong {
          display: block;
          font-size: 15px;
          color: var(--navy);
          margin-bottom: 3px;
      }

      .step-text span {
          font-size: 13px;
          color: var(--muted);
      }

      .workflow-visual {
          background: var(--navy);
          border-radius: 20px;
          padding: 40px;
          color: white;
          text-align: center;
      }

      .workflow-visual h3 {
          font-family: 'DM Serif Display', serif;
          font-size: 28px;
          margin-bottom: 12px;
      }

      .workflow-visual p {
          color: rgba(255, 255, 255, 0.6);
          font-size: 15px;
          line-height: 1.65;
      }

      .wv-badge {
          display: inline-block;
          margin-top: 24px;
          background: rgba(232, 168, 32, 0.15);
          border: 1px solid rgba(232, 168, 32, 0.35);
          color: var(--accent);
          padding: 8px 18px;
          border-radius: 6px;
          font-size: 13px;
          font-weight: 600;
      }

      /* GOBD */
      .gobd-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
          gap: 24px;
      }

      .gobd-card {
          border: 1px solid var(--border);
          border-radius: 16px;
          padding: 32px;
          background: white;
      }

      .gobd-card h3 {
          font-family: 'DM Serif Display', serif;
          font-size: 21px;
          color: var(--navy);
          margin-bottom: 12px;
      }

      .gobd-card p {
          color: var(--muted);
          font-size: 15px;
          line-height: 1.65;
      }

      .gobd-tag {
          display: inline-block;
          margin-top: 16px;
          background: #e8f0fb;
          color: var(--mid);
          padding: 5px 14px;
          border-radius: 20px;
          font-size: 12px;
          font-weight: 600;
      }

      /* TARGET */
      .target-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
          gap: 20px;
      }

      .target-card {
          background: var(--light-bg);
          border-radius: 14px;
          padding: 28px 24px;
          text-align: center;
      }

      .target-emoji {
          font-size: 36px;
          margin-bottom: 14px;
      }

      .target-card h3 {
          font-weight: 600;
          font-size: 16px;
          color: var(--navy);
          margin-bottom: 8px;
      }

      .target-card p {
          color: var(--muted);
          font-size: 14px;
          line-height: 1.6;
      }

      /* CTA BANNER */
      .cta-banner {
          background: var(--navy);
          margin: 0 5%;
          border-radius: 24px;
          padding: 70px 5%;
          text-align: center;
          position: relative;
          overflow: hidden;
      }

      .cta-banner::before {
          content: '';
          position: absolute;
          top: -150px;
          left: 50%;
          transform: translateX(-50%);
          width: 700px;
          height: 700px;
          background: radial-gradient(circle, rgba(37, 99, 168, 0.4) 0%, transparent 65%);
          pointer-events: none;
      }

      .cta-banner h2 {
          font-family: 'DM Serif Display', serif;
          font-size: clamp(28px, 4vw, 44px);
          color: white;
          margin-bottom: 16px;
      }

      .cta-banner p {
          color: rgba(255, 255, 255, 0.6);
          font-size: 17px;
          max-width: 480px;
          margin: 0 auto 36px;
          line-height: 1.65;
      }

      /* FOOTER */
      footer {
          text-align: center;
          padding: 40px 5%;
          color: var(--muted);
          font-size: 14px;
          border-top: 1px solid var(--border);
          margin-top: 80px;
      }

      footer strong {
          color: var(--navy);
      }

      /* DIVIDER */
      .divider {
          height: 1px;
          background: var(--border);
          max-width: 1160px;
          margin: 0 auto;
      }

      @keyframes fadeUp {
          from {
              opacity: 0;
              transform: translateY(22px);
          }

          to {
              opacity: 1;
              transform: translateY(0);
          }
      }

      /* RESPONSIVE */
      @media (max-width: 600px) {
          .trust-bar {
              gap: 24px;
          }

          .cta-banner {
              margin: 0 3%;
              padding: 50px 6%;
          }
      }

      /* ===============================
   FEHLENDE BASIS-STYLES
   =============================== */

      /* Schrift richtig laden */
      body {
          font-family: 'DM Sans', Arial, sans-serif;
      }

      body {
          background: var(--light-bg);
      }

      .page-wrap {
          max-width: 1100px;
          width: 100%;
          margin: 0 auto;
          background: var(--white);
          padding: 0 16px;
      }

      /* Abstand wegen fixed NAV */
      .hero {
          margin-top: 70px;
      }

      /* Standard Links */
      a {
          color: var(--mid);
          text-decoration: none;
      }

      a:hover {
          text-decoration: underline;
      }

      /* Listen sauber */
      ul {
          list-style: none;
          padding-left: 0;
      }

      li {
          margin: 6px 0;
      }

      /* H1/H2 etwas klarer */
      h1,
      h2,
      h3 {
          font-weight: 600;
      }

      .cta-banner h2 {
          color: #ffffff;
      }

      .cta-banner p {
          color: rgba(255, 255, 255, 0.85);
      }

      /* SVG Icons sauber ausrichten */
      svg {
          display: inline-block;
          vertical-align: middle;
      }

      /* Buttons im Hero sichtbar halten */
      .hero-cta a {
          display: inline-block;
      }

      /* Fix für Text im Hero (Screenshot Problem) */
      .hero p {
          max-width: 700px;
      }

      /* Trust-Bar Abstand zum Hero */
      .trust-bar {
          margin-top: -10px;
      }



      /* ===============================
   NAV FINAL FIX – STARTSEITE
   =============================== */



      /* LOGO */
      .nav-logo img {
          height: 40px;
          width: auto;
      }

      /* DESKTOP MENÜ */
      .nav-menu {
          display: flex;
          gap: 12px;
      }

      /* BUTTONS */
      .nav-btn {
          background: var(--accent);
          color: var(--navy);
          padding: 10px 16px;
          border-radius: 8px;
          text-decoration: none;
          font-size: 14px;
          white-space: nowrap;
      }

      /* ===============================
   /* ===============================
   ZAHLPRO CHAT STYLE (CLEAN FINAL)
   =============================== */

      #qa-box {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
      }

      /* HEADER */
      #qa-header {
          width: 80%;
          margin: 20px auto 10px;
          color: #ffffff;
          font-weight: 600;
          border-bottom: 1px solid rgba(255, 255, 255, 0.08);
          padding-bottom: 10px;
      }

      /* MESSAGES */
      #qa-messages {
          width: 80%;
          display: flex;
          flex-direction: column;
          gap: 14px;
      }

      /* BUBBLES */
      .user,
      .ai {
          width: 100%;
          padding: 14px 18px;
          border-radius: 14px;
      }

      .user {
          background: #2f4666;
          color: #a4cbe0;
      }

      .ai {
          background: #a4cbe0;
          color: #1a2535;
      }

      /* INPUT */
      #qa-input-area {
          width: 80%;
          margin: 20px auto 30px;
          display: flex;
          gap: 12px;
      }

      #qa-input {
          flex: 1;
          min-height: 60px;
          border-radius: 12px;
          border: none;
          padding: 14px;
          background: #eef3f8;
          outline: none;
      }

      /* BUTTON */
      #qa-send {
          padding: 12px 18px;
          border-radius: 999px;
          border: none;
          background: #2563a8;
          color: #fff;
          font-weight: 600;
          cursor: pointer;
      }

      #qa-send:hover {
          background: #1e4f87;
      }

      /* ===============================
   GLOBAL NAV STANDARD
   =============================== */

      .nav {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 15px 20px;
          background: #1f3554;
      }

      /* LOGO */
      .nav-logo img {
          height: 40px;
          width: auto;
      }

      /* DESKTOP */
      .nav-menu {
          display: flex;
          gap: 12px;
      }

      /* BUTTONS */
      .nav-btn {
          background: var(--accent);
          color: var(--navy);
          padding: 12px;
          border-radius: 10px;
          text-decoration: none;
          text-align: center;
          font-weight: 600;
      }

      /* ===============================
   NAV – BASIS
=============================== */

      .nav {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 30px 20px;
          background: #1f3554;
      }

      .nav-menu {
          display: flex;
          gap: 12px;
          flex-wrap: nowrap;
          /* Desktop bleibt stabil */
      }

      .nav-btn {
          background: var(--accent);
          color: var(--navy);
          padding: 10px 18px;
          border-radius: 10px;
          text-decoration: none;
          font-weight: 600;
          font-size: 14px;
          white-space: nowrap;
          flex: 0 0 auto;
          /* 🔥 verhindert Shrink */
      }


      /* ===============================
   TABLET (WICHTIG)
=============================== */

      @media (max-width: 1024px) {

          .nav {
              flex-direction: column;
              align-items: center;
              gap: 15px;
          }

          .nav-menu {
              flex-wrap: wrap;
              /* 🔥 Umbruch erlaubt */
              justify-content: center;
              width: 100%;
              max-width: 900px;
          }

          .nav-btn {
              flex: 0 0 auto;
              /* 🔥 NICHT schrumpfen */
          }
      }


      /* ===============================
   MOBILE (STACK)
=============================== */

      @media (max-width: 700px) {

          .nav-menu {
              flex-direction: column;
              width: 100%;
              gap: 14px;
          }

          .nav-btn {
              width: 100%;
              text-align: center;
              padding: 14px;
              font-size: 15px;
          }
      }

      @media (max-width: 700px) {

          .nav {
              flex-direction: column;
              gap: 15px;
          }

          .nav-menu {
              width: 100%;
              flex-direction: column;
          }

          .nav-btn {
              width: 100%;
          }

          /* CHAT */
          #qa-header,
          #qa-messages,
          #qa-input-area {
              width: 95%;
          }
      }

      #qa-input-area {
          flex-direction: column;
      }

      #qa-send {
          width: 100%;
          border-radius: 12px;
      }


      /* ===============================
   IMPRESSUM / GLOBAL MOBILE NAV FIX
   =============================== */

      @media (max-width: 700px) {

          .nav {
              flex-direction: column;
              align-items: center;
              gap: 15px;
              padding: 15px 20px;
          }

          .nav-logo {
              justify-content: center;
          }

          .nav-logo img {
              height: 50px;
          }

          .nav-menu {
              width: 100%;
              display: flex;
              flex-direction: column;
              gap: 14px;
              margin-top: 10px;
          }

          .nav-btn {
              width: 100%;
              text-align: center;
              padding: 14px;
              font-size: 15px;
              border-radius: 12px;
          }
      }

      .hero-image-wrap {
          margin-top: 20px;
          padding: 0 12px;
      }

      .hero-image-wrap img {
          width: 100%;
          max-width: 280px;
          /* 🔥 kleiner auf Handy */
          height: auto;
      }

      /* 🔥 FORCE MOBILE FIX */
      @media (max-width: 700px) {

          .hero-image-wrap img {
              width: 100% !important;
              max-width: 260px !important;
              height: auto !important;
          }

          .hero-image-wrap {
              padding: 0 10px !important;
              margin-top: 20px !important;
          }
      }

      /* ===============================
        FOOTER FIX – NUR HIER WEISS
        =============================== */

      .footerx {
          color: #ffffff;
      }

      .footerx a {
          color: #ffffff;
      }

      .footerx a:hover {
          color: #a4cbe0;
          /* optional Hover */
      }

      @font-face {
          font-family: 'DM Sans';
          src: url('../fonts/DMSans-Regular.ttf') format('truetype');
          font-weight: 400;
          font-style: normal;
      }

      @font-face {
          font-family: 'DM Sans';
          src: url('../fonts/DMSans-Medium.ttf') format('truetype');
          font-weight: 500;
      }

      @font-face {
          font-family: 'DM Sans';
          src: url('../fonts/DMSans-Bold.ttf') format('truetype');
          font-weight: 700;
      }

      @font-face {
          font-family: 'DM Sans';
          src: url('../fonts/dm-sans-v17-latin-regular.woff2') format('woff2');
          font-weight: 400;
          font-style: normal;
      }

      @font-face {
          font-family: 'DM Sans';
          src: url('../fonts/dm-sans-v17-latin-500.woff2') format('woff2');
          font-weight: 500;
          font-style: normal;
      }

      @font-face {
          font-family: 'DM Sans';
          src: url('../fonts/dm-sans-v17-latin-700.woff2') format('woff2');
          font-weight: 700;
          font-style: normal;
      }