html.dark { background-color: #111827; color: #f9fafb; }
    .dark nav, .dark section, .dark footer { background-color: #181e2b !important; color: #f3f6fa !important; }

    .fade-in { animation: fadeIn 0.8s cubic-bezier(.6,-0.28,.74,.05);}
    @keyframes fadeIn { from { opacity: 0; transform: translateY(32px);} to { opacity: 1; transform: translateY(0);} }

    .brand-airstrip {
      font-size: 2.2rem;
      letter-spacing: 0.08em;
      font-weight: 700;
      display: flex;
      align-items: center;
      line-height: 1;
    }
    .brand-airstrip .inco { color: #181818; }
    .brand-airstrip .xx { color: #dc2626; margin-left: -0.09em; }

    /* Logo-Farben im Dark Mode: inco weiß, xx rot */
    .dark .brand-airstrip .inco { color: #ffffff !important; }
    .dark .brand-airstrip .xx   { color: #ff1a2d !important; }

    .icon-list i { font-size: 1.7rem; margin-right: 0.7em;}
    .lang-select { font-weight: 600; text-transform: uppercase; letter-spacing: .07em; border-radius: 0.5em; padding: 0.2em 0.5em; font-size: 0.98rem;}
    .lang-select:focus { outline: 2px solid #2563eb;}
    .nav-link { font-size: 0.98rem;}
    .competence-card { transition: transform .2s, box-shadow .2s; border-radius: 1.2rem;}
    .competence-card:hover { transform: translateY(-7px) scale(1.02); box-shadow: 0 8px 32px rgba(60,60,100,.09);}
    .competence-icon { font-size: 2rem; margin-right: 0.8em;}
    .competence-header { display: flex; align-items: center; margin-bottom: 0.3em;}
    section:not(:first-child) { animation: fadeInUp 1s cubic-bezier(.48,.02,.41,1.1);}
    @keyframes fadeInUp { from { opacity:0; transform: translateY(36px);} to{opacity:1; transform:translateY(0);}}
    .card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:2rem;}
    .soft-bg {background: linear-gradient(145deg,#d1fae5 0%,#e0e7ef 100%);}
    .dark .soft-bg {background: linear-gradient(145deg,#23274d 0%,#334155 100%);}
    .dark .competence-card { background: #21283a !important; color: #f3f6fa; }
    .dark .card-grid h3, .dark .card-grid p, .dark .competence-header { color: #f3f6fa !important; }
    .dark h1, .dark h2, .dark h3, .dark p, .dark li, .dark span, .dark a { color: #f3f6fa !important; }
    .dark .text-gray-700, .dark .text-gray-600 { color: #e2e8f0 !important; }
    .dark .text-gray-300 { color: #cbd5e1 !important; }
    .dark ul.list-disc li { color: #e2e8f0 !important; }
    .dark .brand-airstrip { color: #f3f6fa !important; }

	.hero-zoom {
	  animation: heroZoom 1500ms ease-out both;
	  will-change: transform, color, text-shadow;
	}
	.dark .hero-zoom { animation-name: heroZoomDark; }
	@keyframes heroZoom {
      0%   { transform: scale(1.08); color: #ffffff; text-shadow: 0 2px 18px rgba(255,255,255,.45); }
      100% { transform: scale(1);    color: #374151; } /* text-gray-700 */
    }
    .dark .hero-zoom { animation-name: heroZoomDark; }
    @keyframes heroZoomDark {
      0%   { transform: scale(1.08); color: #ffffff; text-shadow: 0 2px 18px rgba(255,255,255,.5); }
      100% { transform: scale(1);    color: #e5e7eb; } /* text-gray-200 */
    }

    /* SVG-Linien-Animation: einmal beim Laden */
    .hero-svg polyline {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      animation: drawLine 1600ms ease-out 0s 1 forwards;
    }
    .hero-svg polyline.l2 { animation-delay: 180ms;  animation-duration: 1800ms; }
    .hero-svg polyline.l3 { animation-delay: 320ms;  animation-duration: 2000ms; }
    @keyframes drawLine { to { stroke-dashoffset: 0; } }

    .data-dot {
      position: absolute; width: 18px; height: 18px; border-radius: 50%;
      box-shadow: 0 0 14px 6px currentColor, 0 0 0 0 #0000;
      opacity: 0.65; pointer-events: none; will-change: transform; z-index: 1;
      transition: filter 0.3s; filter: brightness(1.3) blur(0.5px); background: currentColor;
    }
    .data-dot[data-color="blue"]   { color: #38bdf8; }
    .data-dot[data-color="purple"] { color: #a78bfa; }
    .data-dot[data-color="green"]  { color: #22c55e; }

    @media (max-width: 700px) { .card-grid { grid-template-columns: 1fr; } }
    @media (max-width: 500px) {
      .soft-bg, section, nav, footer { padding-left: 0.5em !important; padding-right: 0.5em !important;}
      .competence-card { padding: 1.2em 0.7em !important;}
      .brand-airstrip { font-size: 1.3rem; }
    }

/* Brand */
:root{
  --brand-red: #dc2626;
  --brand-red-700:#b91c1c;
  --brand-red-800:#991b1b;
  --red-50:#fef2f2;
  --gray-50:#f9fafb; --gray-100:#f3f4f6;
  --gray-800:#1f2937; --gray-900:#111827;
}

/* Logo bleibt: inco schwarz/weiß, xx rot */
.brand-airstrip .inco { color:#111 !important; }
.brand-airstrip .xx   { color:var(--brand-red) !important; }
.dark .brand-airstrip .inco { color:#fff !important; }
.dark .brand-airstrip .xx   { color:var(--brand-red) !important; }

/* Buttons / Links (ersetzt grüne Akzente) */
.bg-green-700{ background-color:var(--brand-red) !important; color:#fff !important; }
.hover\:bg-green-800:hover{ background-color:var(--brand-red-800) !important; }
.text-green-700{ color:var(--brand-red) !important; }
.border-green-700{ border-color:var(--brand-red) !important; }
.hover\:bg-green-50:hover{ background-color:#fff0f0 !important; }

/* Karten-Hintergründe weg von Cyan/Violett/Blau -> neutral/hellgrau,
   Icons statt bunt -> Brand-Rot */
.bg-green-50,.bg-cyan-50,.bg-violet-50,.bg-blue-50,.bg-amber-50 { background-color: var(--gray-50) !important; }
.dark .bg-green-900,.dark .bg-cyan-900,.dark .bg-violet-900,.dark .bg-blue-900,.dark .bg-amber-900 { background-color: var(--gray-800) !important; }
.text-cyan-700,.text-violet-700,.text-blue-700,.text-amber-700 { color: var(--brand-red) !important; }

/* Hero-Panel in Rot/Grau */
.soft-bg{ background:linear-gradient(145deg,var(--red-50) 0%,var(--gray-100) 100%) !important; }
.dark .soft-bg{ background:linear-gradient(145deg,var(--gray-800) 0%,var(--gray-900) 100%) !important; }

/* Hero-SVG (überschreibt Linienfarben) */
.hero-svg polyline{ stroke: var(--brand-red) !important; opacity:.20; }
.hero-svg polyline.l2{ stroke: var(--brand-red-700) !important; opacity:.18; }
.hero-svg polyline.l3{ stroke: #6b7280 !important; opacity:.22; } /* slate-500 als dezenter Kontrast */

/* Fokusfarbe & Hovers in Brand-Rot */
.lang-select:focus { outline:2px solid var(--brand-red) !important; }
a:hover, .nav-link:hover { color:var(--brand-red) !important; }