/* ============================================
   Grundeinstellungen
   ============================================ */

body {
  /* Der Browser setzt hier standardmässig 8px. Wir schreiben es
     bewusst hin, weil der graue Streifen weiter unten mit -8px
     genau diesen Rand wieder ausgleicht. */
  margin: 8px;
}


/* ============================================
   Hintergrund: feines Raster mit schwebenden Formen
   ============================================ */

#hintergrund {
  position: fixed;           /* bleibt beim Scrollen stehen */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;               /* liegt hinter dem ganzen Inhalt */
  overflow: hidden;          /* Formen ragen nicht über den Rand hinaus */

  /* Das Raster: zwei Verläufe, einer für die senkrechten,
     einer für die waagrechten Linien. Jede Linie ist 1px,
     der Rest ist durchsichtig. */
  background-image:
    linear-gradient(to right, #f0f0f0 1px, transparent 1px),
    linear-gradient(to bottom, #f0f0f0 1px, transparent 1px);
  background-size: 60px 60px;   /* Abstand der Rasterlinien */
}

/* Grundform: nur ein dünner Umriss, keine Füllung */
.form {
  position: absolute;
  border: 2px solid #e8e8e8;
  animation: schweben 20s ease-in-out infinite;
}

.form.kreis {
  border-radius: 50%;
}

/* Jede Form bekommt eigene Position, Grösse und Geschwindigkeit.
   Die unterschiedlichen Zeiten sorgen dafür, dass sie nicht
   im Gleichschritt schweben. */
.form-1 {
  top: 12%;
  left: 8%;
  width: 120px;
  height: 120px;
  animation-duration: 22s;
}

.form-2 {
  top: 55%;
  left: 78%;
  width: 90px;
  height: 90px;
  animation-duration: 26s;
  animation-delay: -5s;      /* startet mitten in der Bewegung */
}

.form-3 {
  top: 72%;
  left: 15%;
  width: 60px;
  height: 60px;
  animation-duration: 18s;
  animation-delay: -9s;
}

.form-4 {
  top: 25%;
  left: 65%;
  width: 150px;
  height: 150px;
  animation-duration: 30s;
  animation-delay: -14s;
}

.form-5 {
  top: 40%;
  left: 40%;
  width: 40px;
  height: 40px;
  animation-duration: 24s;
  animation-delay: -3s;
}

/* Die Bewegung: langsam hoch und wieder runter, dabei drehen.
   0% und 100% sind gleich, damit es nahtlos weiterläuft. */
@keyframes schweben {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-40px) rotate(180deg);
  }
  100% {
    transform: translateY(0) rotate(360deg);
  }
}

/* Wer im Betriebssystem weniger Animationen eingestellt hat,
   sieht die Formen still stehen. */
@media (prefers-reduced-motion: reduce) {
  .form {
    animation: none;
  }
}


/* ============================================
   Überschriften und Text
   ============================================ */

h1 {
  font-size: 10em;
  /* Sehr kleiner Abstand nach unten, damit h2 direkt darunter sitzt.
     Achtung: em rechnet mit der Schriftgrösse dieses Elements,
     0.05em sind hier also ca. 8px - nicht 0.05 von 16px. */
  margin-bottom: 0.05em;
}

h2 {
  font-size: 2.5em;
  /* Muss 0 sein: sonst gewinnt der grössere der beiden Abstände
     (margin collapsing) und der Titel schiebt den Untertitel weg. */
  margin-top: 0;
}

p {
  margin-top: 0;
}


/* ============================================
   Über mich: Bild und Text nebeneinander
   ============================================ */

.ueber-mich {
  display: flex;             /* Kinder nebeneinander statt untereinander */
  align-items: flex-start;   /* Text beginnt oben auf Höhe des Bildes */
  gap: 30px;                 /* Abstand zwischen Bild und Text */
}

.ueber-mich img {
  width: 300px;
  border-radius: 12px;       /* leicht abgerundete Ecken */
  flex-shrink: 0;            /* Bild darf nicht schmaler gequetscht werden */
}


/* ============================================
   Grauer Streifen mit den Hobbys
   ============================================ */

.streifen {
  height: 100px;
  background-color: #e0e0e0;
  /* -8px links/rechts heben den Rand vom body auf,
     so geht der Streifen über die ganze Bildschirmbreite. */
  margin: 40px -8px 0 -8px;
  display: flex;
  align-items: center;       /* Hobbys vertikal mittig im Streifen */
  justify-content: center;   /* Hobbys horizontal mittig */
  gap: 40px;                 /* Abstand zwischen den Hobbys */
}


/* ============================================
   Einzelnes Hobby: Icon mit Beschriftung
   ============================================ */

.hobby {
  display: flex;
  flex-direction: column;    /* Icon oben, Beschriftung darunter */
  align-items: center;
  gap: 5px;
  cursor: pointer;           /* Mauszeiger zeigt: hier kann man klicken */
}

.hobby img {
  width: 50px;
  transition: transform 0.2s;   /* macht das Vergrössern flüssig */
}

.hobby:hover img {
  transform: scale(1.2);        /* beim Draufzeigen 20% grösser */
}

.hobby span {
  white-space: nowrap;       /* "Instrument spielen" bleibt auf einer Zeile */
}

/* Der Beschreibungstext steht im HTML, wird aber nicht angezeigt.
   Das JavaScript holt ihn beim Klick heraus und zeigt ihn im Popup. */
.info {
  display: none;
}


/* ============================================
   Zeitstrahl: Lebenslauf und Erfolge
   ============================================ */

.zeitstrahl {
  /* position: relative macht dieses Element zum Bezugspunkt.
     Alles mit position: absolute darin richtet sich danach aus. */
  position: relative;
  margin: 60px 0;
  padding: 20px 0;
}

/* Die senkrechte Linie in der Mitte.
   ::before erzeugt ein Element, das es im HTML gar nicht gibt -
   praktisch, weil die Linie reine Dekoration ist. */
.zeitstrahl::before {
  content: "";               /* muss dastehen, sonst erscheint nichts */
  position: absolute;
  top: 0;
  bottom: 0;                 /* oben und unten fest = Linie so hoch wie der Zeitstrahl */
  left: 50%;
  margin-left: -2px;         /* halbe Linienbreite, damit sie genau mittig sitzt */
  width: 4px;
  background-color: #e0e0e0;
}

/* Ein Eintrag nimmt die halbe Breite ein, damit zwei nebeneinander passen.
   Der Platz zur Mitte hin (padding) ist der Bereich, in dem der Ast liegt. */
.eintrag {
  position: relative;
  width: 50%;
  padding: 20px 40px;
  box-sizing: border-box;    /* padding zählt zur Breite dazu, sonst wird's zu breit */
}

.eintrag.links {
  left: 0;
  text-align: right;         /* Text schaut zur Mittellinie */
}

.eintrag.rechts {
  left: 50%;                 /* startet in der Mitte, geht nach rechts */
}

/* Der Ast: kurze waagrechte Linie vom Kasten zur Mittellinie */
.eintrag::before {
  content: "";
  position: absolute;
  top: 36px;
  width: 40px;               /* genau so breit wie das padding */
  height: 4px;
  background-color: #e0e0e0;
}

.eintrag.links::before {
  right: 0;
}

.eintrag.rechts::before {
  left: 0;
}

/* Der Punkt auf der Mittellinie */
.eintrag::after {
  content: "";
  position: absolute;
  top: 30px;
  width: 16px;
  height: 16px;
  border-radius: 50%;        /* 50% macht aus dem Quadrat einen Kreis */
  background-color: #9e9e9e;
}

/* -8px = halber Punkt, so liegt er mittig auf der Linie */
.eintrag.links::after {
  right: -8px;
}

.eintrag.rechts::after {
  left: -8px;
}

/* Der eigentliche Kasten mit dem Text */
.eintrag-inhalt {
  background-color: #f5f5f5;
  border-radius: 12px;
  padding: 20px;
}

.eintrag-inhalt h3 {
  margin: 5px 0 10px 0;
}

.eintrag-inhalt p {
  margin-bottom: 0;
}

.jahr {
  font-size: 0.85em;
  color: #757575;
}


/* ============================================
   Erfolge: Kästchen nebeneinander
   ============================================ */

.erfolge {
  display: grid;
  /* auto-fit + minmax heisst: so viele Spalten wie Platz haben,
     jede mindestens 250px breit. Wird das Fenster schmaler,
     rutschen die Kästchen automatisch untereinander. */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 60px;
}

.erfolg {
  background-color: #f5f5f5;
  border-radius: 12px;
  padding: 20px;
  border-top: 4px solid #9e9e9e;   /* farbiger Balken oben */
}

.erfolg h3 {
  margin-top: 0;
}

.erfolg p {
  margin-bottom: 0;
}


/* ============================================
   Popup-Fenster
   ============================================ */

/* Dunkle Fläche über der ganzen Seite */
#overlay {
  display: none;             /* normal unsichtbar */
  position: fixed;           /* bleibt beim Scrollen an Ort und Stelle */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);   /* halbdurchsichtiges Schwarz */
  align-items: center;
  justify-content: center;
}

/* Diese Klasse setzt das JavaScript beim Klick auf ein Hobby.
   display: flex zeigt das Overlay und zentriert das weisse Fenster. */
#overlay.offen {
  display: flex;
}

/* Das weisse Fenster in der Mitte */
#fenster {
  background-color: white;
  border-radius: 12px;
  padding: 30px;
  width: 400px;
  max-width: 80%;            /* auf schmalen Bildschirmen nicht breiter */
}

#fenster h3 {
  margin-top: 0;
}

#fenster button {
  font-size: 1em;
  padding: 8px 20px;
  border-radius: 8px;
  border: none;
  background-color: #e0e0e0;
  cursor: pointer;
}