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; }

/* Ganze Karte per Hauptlink klickbar – ohne JS */
.project-card { position: relative; }
.project-card .stretched-link { position: static; }
.project-card .stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;          /* füllt die ganze Karte */
  z-index: 1;        /* unter den Pills */
}
/* Pill-Links sollen über dem „Stretched“-Overlay klickbar sein */
.project-card .pill-link { position: relative; z-index: 2; }

/* Dark-Mode-festes Styling für die Link-Pills */
.lang-select{
  background: #e5e7eb;           /* bg-gray-200 */
  color: #111827;                 /* text-gray-900 */
  border: 1px solid rgba(0,0,0,.08);
  border-radius: .375rem;         /* abgerundet wie vorher */
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.lang-select:hover{
  background: #d1d5db;           /* hover:bg-gray-300 */
}

/* Dark Mode */
html.dark .lang-select{
  background: #374151;            /* ~ bg-gray-700 */
  color: #ffffff;                 /* weiß */
  border-color: rgba(255,255,255,.14);
}
html.dark .lang-select:hover{
  background: #4b5563;            /* ~ dark:hover:bg-gray-600 */
}



/* === Dark Mode – Kontrast-Fixes für Buttons & Karten (v4) === */

/* Projekt-/Kompetenz-Karten klar vom Hintergrund absetzen */
html.dark .project-card {
  background-color: #1f2937 !important;  /* gray-800 */
  border: 1px solid #374151 !important;  /* gray-700 */
  color: #e5e7eb !important;             /* gray-200 */
  border-radius: 1rem;
}
html.dark .project-card h3,
html.dark .project-card p,
html.dark .project-card li,
html.dark .project-card a { color: #e5e7eb !important; }
html.dark .project-card .pill-link {
  background-color: #374151 !important;  /* gray-700 */
  color: #f9fafb !important;             /* gray-50 */
}
html.dark .project-card .pill-link:hover {
  background-color: #4b5563 !important;  /* gray-600 */
}

/* Hero-CTA Outline-Buttons (bg-white + border-green-700) sichtbar machen */
html.dark .soft-bg .bg-white.text-green-700 {
  background-color: transparent !important;
  color: #f3f6fa !important;
}
html.dark .soft-bg .border-green-700 { border-color: var(--brand-red) !important; }
/* Hover-State im Dark Mode leicht einfärben */
html.dark .soft-bg .hover\:bg-green-50:hover {
  background-color: rgba(220, 38, 38, .16) !important; /* brand red @ 16% */
}

/* Generische Pill-Links (auch außerhalb von Cards) lesbar */
html.dark .pill-link {
  background-color: #374151 !important;
  color: #f9fafb !important;
}
html.dark .pill-link:hover { background-color: #4b5563 !important; }

/* Headings in dunklen Sektionen nicht zu hell – angenehmer Kontrast */
html.dark h2 { color: #f1f5f9 !important; }  /* slate-100 */
html.dark h3 { color: #e2e8f0 !important; }  /* slate-200 */

/* Fix: weiße Karten in Dark Mode, falls irgendwo bg-white ohne .project-card genutzt */
html.dark .bg-white { background-color: #1f2937 !important; color: #e5e7eb !important; }

/* Nav-Buttons/Language Selector Kontrast sicherstellen */
html.dark .lang-select { background: #374151 !important; color: #fff !important; border-color: rgba(255,255,255,.14) !important; }
html.dark .lang-select:hover { background:#4b5563 !important; }

/* Hero-Primary-Button bleibt brandrot auch im Dark Mode */
html.dark .bg-green-700 { background-color: var(--brand-red) !important; color:#fff !important; }
html.dark .hover\:bg-green-800:hover { background-color: var(--brand-red-800) !important; }