/*
  Hauptstylesheet für die persönliche Landing‑Page.
  Es nutzt CSS‑Variablen, um das Farbschema gemäß dem
  Material‑Design anzupassen. Passen Sie die Variablen
  oder Klassen nach Belieben an, um Ihren persönlichen
  Stil zu reflektieren. Diese Datei wird von index.html
  und 404.html eingebunden.
*/

/* Farbdefinitionen (Material‑Design‑ähnliche Palette) */
:root {
  /*
    Farbschema für den hellen Modus
    Basierend auf der neuen Farbpalette (#ffa270, #28464b, #326771, #2c8c99, #42d9c8).

    Das mittlere Petrol (#326771) wird als Primärfarbe verwendet und sorgt für
    ein harmonisches, leicht kühles Erscheinungsbild. Eine hellere Variante
    (#42d9c8) sorgt für sanfte Farbverläufe, während das dunkle Blaugrün
    (#28464b) als dunkle Variante eingesetzt wird. Die Akzentfarbe ist das
    warme Orange (#ffa270), das in Buttons und Hover‑Zuständen eingesetzt
    wird. Der Hintergrund ist klassisch weiß, sodass die farbigen Elemente
    klar zur Geltung kommen. Die Schrift bleibt dunkel. Für die
    Schaltflächenfarbe wird im hellen Modus ein dunkler Farbton gewählt, um
    einen guten Kontrast zum hellen Button‑Hintergrund zu erreichen.
  */
  --primary-color: #326771;     /* Primärfarbe: mittleres Petrol */
  --primary-light: #42d9c8;     /* Hellere Variante der Primärfarbe */
  --primary-dark: #28464b;      /* Dunklere Variante der Primärfarbe */
  --secondary-color: #ffa270;   /* Sekundärfarbe: warmes Orange */
  --background-color: #ffffff;  /* Grundfläche: Weiß */
  --text-color: #212121;        /* Dunkle Schrift */
  --button-text-color: #28464b; /* Textfarbe für Buttons im hellen Modus */
}

/*
  Dunkler Modus: Überschreibt die Farbvariablen anhand des Systemthemes.
  Die Rollen der Farben werden getauscht: hellere Töne dienen als Akzente,
  während dunklere Töne den Hintergrund bilden. Der Hintergrund ist ein
  sehr dunkles Petrol, die Schrift erscheint hell. Die sekundäre Farbe
  (#c1d2e0) wirkt auf dunklem Grund angenehm dezent.
*/
@media (prefers-color-scheme: dark) {
  :root {
    /*
      Dunkles Farbschema basierend auf derselben Palette.
      In diesem Modus werden die hellen Töne (#42d9c8 und #2c8c99)
      als Primärfarben genutzt, während das mittlere Blaugrün
      (#326771) als dunkle Variante fungiert. Der Hintergrund ist
      sehr dunkel (#0b1f26), um eine angenehme Lesbarkeit in dunkler
      Umgebung zu gewährleisten. Die Schrift erscheint fast weiß
      und die Akzentfarbe bleibt das warme Orange (#ffa270), das sich
      sowohl auf hellen als auch auf dunklen Hintergründen gut lesen lässt.
    */
    --primary-color: #42d9c8;     /* Primärfarbe: helles Türkis für Buttons/Links */
    --primary-light: #2c8c99;     /* Hellere Variante der Primärfarbe */
    --primary-dark: #326771;      /* Dunklere Variante der Primärfarbe */
    --secondary-color: #ffa270;   /* Sekundärfarbe bleibt das Orange */
    --background-color: #0b1f26;  /* Dunkler Grundton */
    --text-color: #e0f4f5;        /* Helle Schrift */
    --button-text-color: #28464b; /* Textfarbe für Buttons im dunklen Modus */
  }
}

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

body {
  /*
    Verwende Spectral als Serifenschrift für den Fließtext.
    Spectral wurde speziell für textreiche, screen‑first Umgebungen
    entwickelt und ist für lange Lesetexte gut lesbar【831101860335153†L29-L37】.
    Als Fallback wird die generische Serifenschrift verwendet.
  */
  font-family: 'Spectral', serif;
  background-color: var(--background-color);
  color: var(--text-color);
  line-height: 1.6;
}

/* Navigationsleiste */
.navbar {
  background-color: var(--primary-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.navbar .logo {
  font-weight: 700;
  font-size: 1.5rem;
  /*
    Die Logo‑Schrift verwendet Inconsolata als Monospace‑Font, um einen
    technischen, klaren Akzent zu setzen. Inconsolata basiert auf
    humanistischen Sans‑Serifs wie Avenir und Franklin Gothic und wird
    häufig für Programmier‑Text verwendet【95597769803235†L10-L16】.
  */
  font-family: 'Inconsolata', monospace;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}

.nav-links a:hover {
  color: var(--secondary-color);
}

/* Hero‑Bereich */
.hero {
  display: flex;
  /* Zentriere den Inhaltsblock horizontal, damit er optisch ausgewogen bleibt */
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  /* Verlauf: dunkle Primärfarbe zu normaler Primärfarbe */
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
  color: #fff;
  /* Der Text im Inhaltsblock bleibt linksbündig, der Block selbst ist zentriert */
  text-align: left;
  /* Horizontale Polsterung für angenehme Ränder */
  padding: 3rem 2rem;
}

.hero-content h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

/* Stellt sicher, dass der Inhalt im Hero-Bereich linksbündig bleibt und eine Maximalbreite hat.
   Dadurch wirkt die linke Ausrichtung auch auf größeren Monitoren harmonisch. */
.hero-content {
  max-width: 800px;
  text-align: left;
}

/*
  Farbige Begrüßung im Hero‑Bereich. Der Text "Hello," wird mit der
  Sekundärfarbe dargestellt und nutzt die Monospace‑Schrift Inconsolata, um
  sich vom restlichen Text abzuheben.
*/
.hello {
  color: var(--secondary-color);
  font-family: 'Inconsolata', monospace;
}

/* Individuelle Größen und Schriftarten im Hero‑Bereich */
.hero-hello {
  color: var(--secondary-color);
  font-family: 'Inconsolata', monospace;
  font-size: 2.5rem;
  margin: 0;
}

.hero-name {
  /* Name mit Inconsolata in Monospace, um einen technischen Akzent zu setzen */
  font-family: 'Inconsolata', monospace;
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0;
}

.hero-tagline {
  font-size: 1.25rem;
  margin-top: 1rem;
}

/*
  Stil für die Quellenangabe unter dem Zitat im Hero‑Bereich. Die Schrift ist
  leicht kleiner, kursiv und halbtransparent, um sich unter dem Zitat
  unterzuordnen.
*/
.quote-author {
  margin-top: -0.5rem;
  margin-bottom: 1.5rem;
  font-size: 1rem;
  font-style: italic;
  opacity: 0.8;
}

.hero-content p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

/* Social Buttons */
.social-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background-color: var(--secondary-color);
  /* Text colour defined via variable; dark in light mode, white in dark mode */
  color: var(--button-text-color);
  border: none;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  /* Verwende Spectral für die Beschriftung der Buttons, um mit dem Fließtext harmonisch
     zu wirken und trotzdem professionell zu erscheinen【831101860335153†L29-L37】. */
  font-family: 'Spectral', serif;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s, box-shadow 0.3s, color 0.3s;
}

.btn .icon {
  display: flex;
  align-items: center;
}

.btn:hover {
  background-color: var(--primary-dark);
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}

/* Inhaltsabschnitte */
.about-section,
.contact-section {
  padding: 4rem 2rem;
  max-width: 800px;
  margin: 0 auto;
}

.about-section h2,
.contact-section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--primary-color);
}

.about-section p,
.contact-section p {
  font-size: 1rem;
  margin-bottom: 1rem;
}

/* Setzt die Überschrift im Kontaktabschnitt in die Monospace-Schrift Inconsolata,
   um sie vom übrigen Text abzuheben. */
.contact-section h2 {
  font-family: 'Inconsolata', monospace;
}

footer {
  text-align: center;
  padding: 1.5rem;
  background-color: var(--primary-dark);
  color: #fff;
  /* Footer in Monospace-Schrift Inconsolata für einen konsistenten, technischen Look */
  font-family: 'Inconsolata', monospace;
}

/* Media Queries für kleinere Bildschirme */
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2rem;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  .nav-links {
    display: none; /* In einer echten Implementierung könnte hier ein Burger‑Menü erscheinen */
  }
}