/* ClaimWerk - Design-System der oeffentlichen Software-Seiten
   ===========================================================
   Ausgelagert am 2026-07-26 aus templates/base.html im Zuge der
   Trennung von Buero-Website und Produkt.

   Inhalt ist UNVERAENDERT uebernommen. Das war Absicht: Die Seiten
   Schadenakte, Buchen, Danke, Download und die Fehlerseiten haengen
   an diesen Klassen, teils ueber tausende Zeilen. Ein gleichzeitiger
   Umbau von Layout UND Aussehen haette zwei Fehlerquellen vermischt.

   Wer das spaeter an die Produktseite angleichen will, findet deren
   Formensprache in static/css/claimwerk.css.

   Eingebunden von templates/software_base.html. */

/* === Schriften (lokal, DSGVO-konform) === */
  @font-face{font-family:'Manrope';font-style:normal;font-weight:300;font-display:swap;src:url('/static/fonts/manrope-v20-latin-300.woff2') format('woff2')}
  @font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/manrope-v20-latin-regular.woff2') format('woff2')}
  @font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/manrope-v20-latin-500.woff2') format('woff2')}
  @font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/manrope-v20-latin-600.woff2') format('woff2')}
  @font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/manrope-v20-latin-700.woff2') format('woff2')}
  @font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('/static/fonts/manrope-v20-latin-800.woff2') format('woff2')}

    /* === RESET & BASE === */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    :root {
      --bg: #071020;
      --bg2: #091428;
      --a: #43C0CA;
      --a2: #6BD5DD;
      --ag: rgba(67,192,202,0.1);
      --p: #2a6fff;
      --p2: #5a9fff;
      --pg: rgba(42,111,255,0.08);
      --text: #c8d8f0;
      --mt: rgba(200,216,240,0.45);
      --card: rgba(42,111,255,0.025);
      --brd: rgba(42,111,255,0.1);
    }

    body {
      font-family: 'Manrope', system-ui, -apple-system, sans-serif;
      background: var(--bg);
      color: var(--text);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* === GRID OVERLAY === */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background-image:
        linear-gradient(rgba(42,111,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(42,111,255,0.03) 1px, transparent 1px);
      background-size: 60px 60px;
      opacity: .8;
    }

    /* === ANIMATIONS === */
    @keyframes flow { 0% { stroke-dashoffset: 200 } 100% { stroke-dashoffset: 0 } }
    @keyframes flowR { 0% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: 200 } }
    @keyframes nGlow { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }
    @keyframes pRing { 0% { r: 5; opacity: .7 } 100% { r: 22; opacity: 0 } }
    @keyframes fadeUp { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: translateY(0) } }
    @keyframes gPulse { 0% { opacity: .4; transform: scale(1) } 100% { opacity: .9; transform: scale(1.1) } }
    @keyframes rot { from { transform: rotate(0) } to { transform: rotate(360deg) } }
    @keyframes rotR { from { transform: rotate(360deg) } to { transform: rotate(0) } }
    @keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: .15 } }
    @keyframes scanH { 0% { transform: translateX(-110%) } 100% { transform: translateX(110%) } }
    @keyframes scanV { 0% { top: -2px } 100% { top: 100% } }
    @keyframes dataUp { 0% { opacity: 0; transform: translateY(6px) } 40% { opacity: 1 } 100% { opacity: 0; transform: translateY(-12px) } }
    @keyframes dmgPulse { 0%, 100% { r: 4; opacity: .8 } 50% { r: 7; opacity: .4 } }
    @keyframes carGlow { 0% { filter: drop-shadow(0 0 8px rgba(42,111,255,0.15)) } 50% { filter: drop-shadow(0 0 20px rgba(42,111,255,0.3)) } 100% { filter: drop-shadow(0 0 8px rgba(42,111,255,0.15)) } }
    @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
    @keyframes slideDown { from { opacity: 0; transform: translateY(-10px) } to { opacity: 1; transform: translateY(0) } }

    .fl { stroke-dasharray: 8 4; animation: flow 3s linear infinite }
    .flR { stroke-dasharray: 8 4; animation: flowR 4s linear infinite }
    .ng { animation: nGlow 2s ease-in-out infinite }

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

    /* === NAVIGATION === */
    .nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      background: rgba(7,16,32,0.85);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--brd);
      transition: all 0.3s ease;
      --mt: rgba(200,216,240,0.6);
    }
    .nav.scrolled {
      background: rgba(7,16,32,0.95);
      box-shadow: 0 4px 30px rgba(0,0,0,0.3);
    }
    .nav-inner {
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 28px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 72px;
    }
    .nav-logo {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      color: var(--text);
    }
    .nav-logo-badge {
      width: 42px;
      height: 42px;
      background: linear-gradient(135deg, #0E7C86 0%, #0A5A62 100%);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .nav-logo-badge svg {
      width: 27px;
      height: 27px;
      display: block;
    }
    .nav-logo-text { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
    .nav-logo-name { font-weight: 700; font-size: 1rem; color: var(--text); }
    .nav-logo-sub { font-size: 0.78rem; color: var(--mt); }

    /* Desktop Links */
    .nav-links {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .nav-links a {
      padding: 8px 16px;
      border-radius: 10px;
      color: var(--text);
      text-decoration: none;
      font-size: 1.0rem;
      font-weight: 500;
      white-space: nowrap;
      transition: all 0.3s;
    }
    .nav-links a:hover { color: var(--p); background: var(--pg); }

    /* Dropdown */
    .nav-dropdown { position: relative; }
    .nav-dropdown-btn {
      padding: 8px 16px;
      border-radius: 10px;
      color: var(--text);
      background: none;
      border: none;
      font-family: inherit;
      font-size: 1.0rem;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: all 0.3s;
    }
    .nav-dropdown-btn:hover { color: var(--p); background: var(--pg); }
    .nav-dropdown-btn svg {
      width: 16px; height: 16px;
      transition: transform 0.3s;
    }
    .nav-dropdown:hover .nav-dropdown-btn svg { transform: rotate(180deg); }
    .nav-dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      width: 260px;
      padding-top: 8px;
      opacity: 0;
      visibility: hidden;
      transition: all 0.2s;
    }
    .nav-dropdown:hover .nav-dropdown-menu {
      opacity: 1;
      visibility: visible;
    }
    .nav-dropdown-menu-inner {
      background: rgba(9,20,40,0.95);
      backdrop-filter: blur(20px);
      border: 1px solid var(--brd);
      border-radius: 16px;
      padding: 8px;
      box-shadow: 0 16px 48px rgba(0,0,0,0.4);
    }
    .nav-dropdown-menu a {
      display: block;
      padding: 10px 14px;
      border-radius: 10px;
      text-decoration: none;
      transition: all 0.2s;
    }
    .nav-dropdown-menu a:hover { background: var(--pg); }
    .nav-dropdown-menu a span { font-weight: 600; font-size: 1.0rem; color: var(--text); display: block; }
    .nav-dropdown-menu a p { font-size: 0.88rem; color: var(--mt); margin-top: 2px; }
    .nav-dropdown-group { padding: 8px 14px 4px; font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mt); font-weight: 700; }
    .nav-dropdown-divider { height: 1px; background: var(--brd); margin: 6px 6px; }

    /* Nav CTA */
    .nav-right { display: flex; align-items: center; gap: 16px; }
    .nav-phone {
      color: var(--p);
      text-decoration: none;
      font-weight: 600;
      font-size: 1.0rem;
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
      transition: color 0.3s;
    }
    .nav-phone:hover { color: var(--p2); }
    .nav-phone svg { width: 18px; height: 18px; }
    .nav-cta {
      padding: 10px 24px;
      background: linear-gradient(135deg, var(--a), var(--a2));
      color: #fff;
      font-family: inherit;
      font-weight: 700;
      font-size: 0.97rem;
      border: none;
      border-radius: 12px;
      text-decoration: none;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.3s;
      box-shadow: 0 4px 20px rgba(67,192,202,0.25);
    }
    .nav-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(67,192,202,0.4);
    }

    /* Mobile Menu Button */
    .nav-mobile-btn {
      display: none;
      background: none;
      border: none;
      padding: 8px;
      border-radius: 10px;
      cursor: pointer;
      color: var(--text);
      transition: background 0.3s;
    }
    .nav-mobile-btn:hover { background: var(--pg); }
    .nav-mobile-btn svg { width: 24px; height: 24px; }

    /* Mobile Menu */
    .nav-mobile {
      display: none;
      background: rgba(7,16,32,0.98);
      backdrop-filter: blur(20px);
      border-top: 1px solid var(--brd);
      padding: 20px;
    }
    .nav-mobile.open { display: block; animation: slideDown 0.3s ease; }
    .nav-mobile a {
      display: block;
      padding: 14px 16px;
      border-radius: 12px;
      color: var(--text);
      text-decoration: none;
      font-weight: 500;
      font-size: 0.95rem;
      transition: all 0.2s;
    }
    .nav-mobile a:hover { background: var(--pg); color: var(--p); }
    .nav-mobile-divider {
      border-top: 1px solid var(--brd);
      margin: 12px 0;
      padding-top: 12px;
    }
    .nav-mobile-group { font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mt); font-weight: 700; padding: 14px 16px 6px; }
    .nav-mobile-phone {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px;
      color: var(--p);
      font-weight: 600;
      text-decoration: none;
    }
    .nav-mobile-phone svg { width: 20px; height: 20px; }
    .nav-mobile-cta {
      display: block;
      text-align: center;
      padding: 14px;
      background: linear-gradient(135deg, var(--a), var(--a2));
      color: #fff;
      font-weight: 700;
      border-radius: 12px;
      text-decoration: none;
      box-shadow: 0 4px 20px rgba(67,192,202,0.25);
      margin-top: 8px;
    }

    /* === NAV SPACER === */
    .nav-spacer { height: 72px; }

    /* === FLASH MESSAGES === */
    .flash-container { max-width: 1180px; margin: 0 auto; padding: 16px 28px 0; }
    .flash-msg {
      padding: 14px 18px;
      border-radius: 12px;
      margin-bottom: 12px;
      font-size: 0.9rem;
      animation: slideDown 0.3s ease;
    }
    .flash-error {
      background: rgba(239,68,68,0.1);
      border: 1px solid rgba(239,68,68,0.3);
      color: #fca5a5;
    }
    .flash-success {
      background: rgba(34,197,94,0.1);
      border: 1px solid rgba(34,197,94,0.3);
      color: #86efac;
    }

    /* === SECTIONS === */
    .sec { position: relative; z-index: 1; padding: 80px 0; overflow: hidden; }
    .alt { background: var(--bg2); }
    .circuit { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

    /* === SECTION TRANSITIONS === */
    .sec-fade-out {
      position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
      background: linear-gradient(to top, var(--bg), transparent);
      z-index: 3; pointer-events: none;
    }
    .alt > .sec-fade-out { background: linear-gradient(to top, var(--bg2), transparent); }
    .sec-fade-in {
      position: absolute; left: 0; right: 0; top: 0; height: 120px;
      background: linear-gradient(to bottom, var(--bg), transparent);
      z-index: 3; pointer-events: none;
    }
    .alt > .sec-fade-in { background: linear-gradient(to bottom, var(--bg2), transparent); }
    .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    /* === PARTICLE CANVAS === */
    #particles-bg {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      z-index: 5;
      pointer-events: none;
    }

    /* === DIVIDER === */
    .dv { height: 80px; position: relative; z-index: 1; background: linear-gradient(180deg, var(--bg), var(--bg2)); }
    .dv-r { background: linear-gradient(180deg, var(--bg2), var(--bg)); }
    .dv-l { position: absolute; bottom: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, var(--p), var(--a), transparent); opacity: .2; }

    /* === TYPOGRAPHY === */
    .sl { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--p); margin-bottom: 14px; }
    .st { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 700; margin-bottom: 16px; color: var(--text); }
    .sd { font-size: 0.95rem; line-height: 1.7; color: var(--mt); max-width: 520px; margin-bottom: 40px; }
    .hl { background: linear-gradient(135deg, var(--a), var(--a2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .hlb { background: linear-gradient(135deg, var(--p), var(--p2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

    /* === BUTTONS === */
    .bp {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 32px;
      background: linear-gradient(135deg, var(--a), var(--a2));
      color: #fff;
      font-family: inherit;
      font-weight: 700;
      font-size: 14px;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.3s;
      box-shadow: 0 4px 20px rgba(67,192,202,0.25);
    }
    .bp:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 36px rgba(67,192,202,0.4);
    }
    .bs {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 32px;
      background: rgba(37,211,102,0.08);
      color: #25d366;
      font-family: inherit;
      font-weight: 500;
      font-size: 14px;
      border: 1px solid rgba(37,211,102,0.4);
      border-radius: 12px;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.3s;
    }
    .bs:hover { border-color: #25d366; background: rgba(37,211,102,0.15); color: #2ee872; }

    /* Telefon-Variante in Markenfarbe (Gruen bleibt WhatsApp vorbehalten) */
    .bs-tel {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 32px;
      background: rgba(67,192,202,0.08);
      color: var(--a);
      font-family: inherit;
      font-weight: 600;
      font-size: 14px;
      border: 1px solid rgba(67,192,202,0.45);
      border-radius: 12px;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.3s;
    }
    .bs-tel:hover { border-color: var(--a); background: rgba(67,192,202,0.15); color: #6BD5DD; }

    /* === CARDS === */
    .cd {
      background: var(--card);
      border: 1px solid var(--brd);
      border-radius: 20px;
      padding: 32px 24px;
      transition: all 0.4s;
      position: relative;
      overflow: hidden;
    }
    .cd::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--p), var(--a), transparent);
      opacity: 0;
      transition: opacity 0.4s;
    }
    .cd:hover {
      transform: translateY(-6px);
      border-color: rgba(42,111,255,0.2);
      box-shadow: 0 16px 48px rgba(42,111,255,0.06);
    }
    .cd:hover::before { opacity: 1; }

    /* === FOOTER === */
    .ft {
      position: relative;
      z-index: 1;
      background: var(--bg2);
      border-top: 1px solid var(--brd);
      --mt: rgba(200,216,240,0.6);
    }
    .ft-main {
      max-width: 1180px;
      margin: 0 auto;
      padding: 48px 28px;
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
      gap: 32px;
    }
    .ft-col h3 {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 16px;
    }
    .ft-col a {
      display: block;
      color: var(--mt);
      text-decoration: none;
      font-size: 0.85rem;
      padding: 3px 0;
      transition: color 0.3s;
    }
    .ft-col a:hover { color: var(--p); }
    .ft-col p { color: var(--mt); font-size: 0.85rem; line-height: 1.6; }
    .ft-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
    .ft-logo-badge {
      width: 40px; height: 40px;
      background: linear-gradient(135deg, #0E7C86 0%, #0A5A62 100%);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .ft-logo-badge svg { width: 25px; height: 25px; display: block; }
    .ft-logo-name { font-weight: 700; font-size: 0.95rem; color: var(--text); }
    .ft-logo-sub { font-size: 0.7rem; color: var(--mt); }
    .ft-contact-item {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-bottom: 8px;
    }
    .ft-contact-item svg { width: 18px; height: 18px; color: var(--a); flex-shrink: 0; margin-top: 2px; }
    .ft-contact-item a,
    .ft-contact-item span { color: var(--mt); font-size: 0.85rem; text-decoration: none; transition: color 0.3s; }
    .ft-contact-item a:hover { color: var(--p); }
    .ft-service-box {
      background: var(--card);
      border: 1px solid var(--brd);
      border-radius: 14px;
      padding: 16px;
    }
    .ft-service-box .ft-service-title { color: var(--a); font-weight: 600; font-size: 0.88rem; margin-bottom: 4px; }
    .ft-service-box p { font-size: 0.8rem; }

    /* Footer Bottom */
    .ft-bottom {
      border-top: 1px solid var(--brd);
      max-width: 1180px;
      margin: 0 auto;
      padding: 20px 28px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
    }
    .ft-copy { font-size: 0.78rem; color: var(--mt); }
    .ft-links { display: flex; gap: 16px; flex-wrap: wrap; }
    .ft-links a { font-size: 0.78rem; color: var(--mt); text-decoration: none; transition: color 0.3s; }
    .ft-links a:hover { color: var(--p); }

    /* === WhatsApp BUTTON === */
    .wa-btn {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 90;
      width: 56px;
      height: 56px;
      background: #25D366;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 20px rgba(37,211,102,0.3);
      transition: all 0.3s;
      text-decoration: none;
      overflow: visible;
    }
    .wa-btn::before {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      background: #25D366;
      opacity: 0.4;
      filter: blur(10px);
      animation: waPulseGlow 2s ease-in-out infinite;
    }
    .wa-btn::after {
      content: '';
      position: absolute;
      inset: -10px;
      border-radius: 50%;
      border: 2px solid rgba(37,211,102,0.5);
      animation: waPulseRing 1.8s ease-in-out infinite;
    }
    @keyframes waPulseGlow {
      0%, 100% { opacity: 0.3; filter: blur(8px); }
      50% { opacity: 0.6; filter: blur(14px); }
    }
    @keyframes waPulseRing {
      0%, 100% { transform: scale(1); opacity: 0.6; }
      50% { transform: scale(1.25); opacity: 0; }
    }
    .wa-btn:hover {
      transform: scale(1.1);
      box-shadow: 0 8px 30px rgba(37,211,102,0.5);
    }
    .wa-btn svg { width: 28px; height: 28px; fill: white; }
    .wa-tooltip {
      position: absolute;
      right: 100%;
      margin-right: 12px;
      background: rgba(9,20,40,0.95);
      color: var(--text);
      padding: 8px 14px;
      border-radius: 10px;
      font-size: 0.82rem;
      font-weight: 500;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s;
      border: 1px solid var(--brd);
    }
    .wa-btn:hover .wa-tooltip { opacity: 1; }

    /* === FOCUS VISIBLE === */
    :focus-visible {
      outline: 2px solid var(--p);
      outline-offset: 2px;
    }

    /* === DETAILS/FAQ DARK === */
    details {
      background: var(--card);
      border: 1px solid var(--brd);
      border-radius: 16px;
      overflow: hidden;
      transition: border-color 0.3s;
    }
    details:hover, details[open] { border-color: rgba(42,111,255,0.2); }
    details summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px;
      cursor: pointer;
      list-style: none;
    }
    details summary::-webkit-details-marker { display: none; }
    details summary h3 {
      font-size: 1rem;
      font-weight: 600;
      color: var(--text);
      padding-right: 16px;
    }
    details summary .faq-icon {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: var(--pg);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.3s;
    }
    details[open] summary .faq-icon { background: var(--p); }
    details summary .faq-icon svg {
      width: 16px; height: 16px;
      color: var(--p);
      transition: all 0.3s;
    }
    details[open] summary .faq-icon svg { color: white; transform: rotate(180deg); }
    details .faq-content {
      padding: 0 24px 20px;
      color: var(--mt);
      font-size: 0.9rem;
      line-height: 1.7;
    }
    details .faq-content strong { color: var(--text); }

    /* === RESPONSIVE === */
    @media (max-width: 1024px) {
      /* ABWEICHUNG von base.html: dort stand hier ".nav-links, .nav-right".
         Das war richtig, solange ein Klappmenue den Ersatz lieferte.
         software_base.html hat keins - .nav-right traegt dort den einzigen
         Knopf der Kopfzeile. Mit der alten Regel war die Leiste auf dem
         Telefon ohne jede Aktion. */
      .nav-links { display: none; }
      .nav-mobile-btn { display: block; }
      .ft-main { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 900px) {
      .ft-main { grid-template-columns: 1fr; gap: 24px; }
      .wrap { padding: 0 18px; }
      .sec { padding: 60px 0; }

      /* === MOBILE PERFORMANCE: Pulse-Animationen deaktivieren === */
      .wa-btn::before, .wa-btn::after,
      .pulse-cta::before, .pulse-cta::after,
      .pulse-cta-green::before, .pulse-cta-green::after,
      .sec-ablauf-bg .bs::before, .sec-ablauf-bg .bs::after {
        animation: none !important;
        opacity: 0 !important;
      }
      .wa-btn:hover, .pulse-cta:hover { transform: none !important; }
    }
    @media (max-width: 640px) {
      .nav-inner { padding: 0 18px; height: 64px; }
      .nav-spacer { height: 64px; }
      /* ABWEICHUNG von base.html: dort wurde .nav-logo-text hier
         ausgeblendet, weil der Schriftzug neben dem breiten Marketing-Menue
         keinen Platz hatte. Hier steht nur noch ein Knopf daneben - der
         Name bleibt, sonst zeigte die Leiste ein nacktes Symbol ohne
         Hinweis, auf welcher Seite man ist. Statt auszublenden eine Stufe
         kleiner. */
      .nav-logo-sub { font-size: 0.62rem; }
      .nav-logo-name { font-size: 0.95rem; }
    }

    /* === GLOBAL STAGGER ANIMATION === */
    .stagger-item {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .stagger-item.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* === PULSE CTA (Petrol) === */
    .pulse-cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 16px 36px;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--a), #0E7C86);
      color: #fff;
      font-weight: 700;
      font-size: 1.05rem;
      text-decoration: none;
      position: relative;
      transition: transform 0.3s;
      overflow: visible;
    }
    .pulse-cta:hover { transform: scale(1.05); }
    .pulse-cta::before {
      content: '';
      position: absolute;
      inset: -3px;
      border-radius: 17px;
      background: linear-gradient(135deg, var(--a), #2FA9B4);
      opacity: 0.6;
      filter: blur(8px);
      z-index: -1;
      animation: ctaGlow 2s ease-in-out infinite;
    }
    .pulse-cta::after {
      content: '';
      position: absolute;
      inset: -8px;
      border-radius: 22px;
      border: 2px solid rgba(67,192,202,0.5);
      animation: ctaPulse 1.8s ease-in-out infinite;
      z-index: -1;
    }

    /* === PULSE CTA (Green - WhatsApp) === */
    .pulse-cta-green {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 28px;
      border-radius: 14px;
      border: 1px solid rgba(37,211,102,0.5);
      color: #25d366;
      background: rgba(37,211,102,0.1);
      font-weight: 600;
      font-size: 1rem;
      text-decoration: none;
      position: relative;
      transition: all 0.3s;
      overflow: visible;
    }
    .pulse-cta-green:hover { background: rgba(37,211,102,0.2); border-color: #25d366; color: #2ee872; transform: scale(1.03); }
    .pulse-cta-green::before {
      content: '';
      position: absolute;
      inset: -3px;
      border-radius: 17px;
      background: #25D366;
      opacity: 0.15;
      filter: blur(10px);
      z-index: -1;
      animation: ctaGlowSoft 2s ease-in-out infinite;
    }
    .pulse-cta-green::after {
      content: '';
      position: absolute;
      inset: -8px;
      border-radius: 22px;
      border: 2px solid rgba(37,211,102,0.5);
      animation: ctaPulse 1.8s ease-in-out infinite;
      z-index: -1;
    }

    @keyframes ctaPulse {
      0%, 100% { transform: scale(1); opacity: 0.6; }
      50% { transform: scale(1.12); opacity: 0; }
    }
    @keyframes ctaGlow {
      0%, 100% { opacity: 0.4; filter: blur(8px); }
      50% { opacity: 0.7; filter: blur(14px); }
    }
    @keyframes ctaGlowSoft {
      0%, 100% { opacity: 0.1; }
      50% { opacity: 0.25; }
    }

    /* === EXTRA BLOCKS === */