html { scroll-behavior: smooth; }
:root { --bg-green: #004225; --text-light: #FFFFFF; --text-primary: #E0E0E0; --text-muted: #A0B5AB; }
body { margin: 0; padding: 0; font-family: 'Roboto Mono', monospace; background-color: var(--bg-green); color: var(--text-primary); overflow-x: hidden; }
#bg-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
nav { position: fixed; top: 0; right: 0; padding: 40px; z-index: 10; }
nav a { color: var(--text-muted); text-decoration: none; font-size: 0.9em; margin-left: 25px; transition: color 0.3s ease; }
nav a:hover { color: var(--text-light); }
.content-section { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 0 10%; max-width: 1000px; margin: 0 auto; }
.hero h1 {
  font-size: 4.5em;
  color: var(--text-light);
  margin: 0;
  line-height: 1.1;
  white-space: nowrap;
}
@media (max-width: 768px) {
  /* Korrektur 1: H1 Schriftgröße und verhindert Brechen von "ANALYSIS" */
  .hero h1 {
    font-size: 2.8em;
    white-space: nowrap;
  }

  /* Korrektur 2: Navigation stapeln und fixieren */
  nav {
    left: 0;
    right: auto;
    width: 90%;
    padding: 20px 5%;
    text-align: left;
    display: flex;
    flex-direction: column;
  }
  nav a {
    margin-left: 0;
    margin-top: 5px;
    padding: 5px 0;
  }
}
@media (max-width: 768px) {
  /* Reduziere die Schriftgröße des Subtitels auf kleineren Bildschirmen */
  .hero p {
    font-size: 1.0em; /* Reduziert von 1.2em */
    /* Optional: Setze eine feste Breite, um Umbrüche zu erzwingen/verhindern */
    max-width: 90%;
  }
}
.project-links {
  display: flex; /* Links nebeneinander anordnen */
  gap: 15px;    /* Abstand zwischen DEMO und GITHUB */
  /* Stellt sicher, dass die Links nicht selbst umbrechen, wenn es eng wird */
  white-space: nowrap;
}

@media (max-width: 480px) {
  /* Noch kleinere Geräte */
  .hero p {
    font-size: 0.9em;
  }
}
.hero h1, .hero p { visibility: hidden; white-space: pre-wrap; }
.fade-in-char { visibility: visible; opacity: 0; animation: fadeInChar 0.15s ease-out forwards; display: inline-block; }
@keyframes fadeInChar { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.fade-in-word { visibility: visible; opacity: 0; animation: fadeInWord 0.5s ease-out forwards; display: inline-block; }
@keyframes fadeInWord { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.project-list { list-style: none; padding: 0; margin: 0; }
.project-list li { font-size: 1.1em; padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.15); display: flex; justify-content: space-between; align-items: center; }
.project-list .project-title { color: var(--text-light); white-space: nowrap; }
.project-list .project-tags { font-size: 0.9em; color: var(--text-muted); }
.project-list .project-link { color: var(--text-light); text-decoration: none; font-weight: 700; letter-spacing: 0.5px; transition: color 0.3s ease; white-space: nowrap; }
.project-list .project-link:hover { color: var(--text-muted); }

@media (max-width: 768px) {
  .project-list { list-style: none; padding: 0; margin: 0; }
  .project-list li {
    flex-direction: column;
    padding: 15px 0 10px 0;
  }
  .project-list li > div {
    text-align: left;
    width: 100%;
  }
  .project-list .project-title {
    color: var(--text-light);
    white-space: nowrap;
  }
  .project-list .project-tags { font-size: 0.9em; color: var(--text-muted); }

  .project-links {
    flex-direction: column;
    align-items: flex-start; /* Alle Links links ausrichten */
    gap: 0;                 /* Abstand entfernen, da sie gestapelt sind */
    margin-top: 5px;        /* Abstand von den Tags zum ersten Link */
  }

  /* Jeder einzelne Link erhält einen leichten Abstand, wenn gestapelt */
  .project-links .project-link {
    margin-bottom: 3px;
    font-size: 0.9em;
  }

  .project-list .project-link {
    align-self: flex-end;
    margin-top: 5px;
    font-size: 0.9em;
  }
}
h2 { font-size: 1.5em; color: var(--text-light); padding-bottom: 10px; border-bottom: 1px solid var(--text-light); display: inline-block; }
#fade-in-p { margin: 6px 0 0; }
#fade-in-p2 { margin: 4px 0 0; }

/* keep mobile overrides consistent */
@media (max-width: 768px) {
  #fade-in-h1 {
    white-space: nowrap;
  }
  #fade-in-p { margin-top: 6px; }
  #fade-in-p2 { margin-top: 4px; }
}
.link-word {
  text-decoration: underline;
  cursor: pointer;
  color: var(--text-primary); /* Stellt sicher, dass die Farbe nicht sofort weiß ist */
  transition: color 0.3s ease;
}
.link-word:hover {
  color: var(--text-muted);
}

.metrics-grid {
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 25px;
}
.metric-item {
  text-align: left;
}

.metric-label {
  font-size: 0.8em;
  color: var(--text-muted); /* Gedämpfte Farbe für die Beschriftung */
  margin-bottom: 2px;
}
.metric-value {
  font-size: 1.5em;
  color: var(--text-light); /* Helle Farbe für den Wert */
  font-weight: 700;
}
/* --- BASIS-CHART UND LOCH (FÜR TRENNLINIEN) --- */

#portfolio-chart-container {
  max-width: 600px; /* Set a max-width for large screens */
  margin: 0 auto; /* Center the container and remove vertical spacing */
  width: 100%; /* Ensure it takes up the full width of its parent */
}