body {
  font-family: Arial, sans-serif;   /* Schriftart für die ganze Seite */
  margin: 0;                        /* Kein äußerer Abstand */
  padding: 0;                       /* Kein innerer Abstand */
  background: #f4f4f4;              /* Hellgrauer Hintergrund */
  color: #333;                      /* Dunkelgraue Standardschriftfarbe */
}

header {
  background: #222;       /* Sehr dunkles Grau als Hintergrundfarbe */
  color: #fff;            /* Weißer Text */
  padding: 20px;          /* Innenabstand oben/unten + rechts/links */
  text-align: center;     /* Zentriert den Inhalt horizontal */
}

header img {
  width: 300px;               /* Bild wird genau 300 Pixel breit dargestellt */
  vertical-align: middle;    /* Bild richtet sich an der Text-Mitte aus */
}

main {
  padding: 20px;        /* Innenabstand von 20 px rundum */
  max-width: 800px;     /* Maximal 800 px breit – ideal für Desktop-Lesbarkeit */
  margin: auto;         /* Zentriert das Element horizontal */
}

footer {
  text-align: center;     /* Inhalt im Footer zentrieren */
  padding: 20px;          /* Innenabstand oben/unten + rechts/links */
  font-size: 0.9em;       /* Etwas kleinere Schrift (90 % der Standardgröße) */
  background: #eee;       /* Hellgrauer Hintergrund (#eeeeee) */
}

nav {
  text-align: center;
  margin-top: 20px;
}

nav a {
  display: inline-block;                 /* Macht Links zu Block-ähnlichen Elementen, die nebeneinander stehen können */
  margin: 0 15px;                       /* 0 Abstand oben und unten, 15px rechts und links */
  color: #0066cc;                       /* Kräftiges Blau für die Linkfarbe */
  text-decoration: none;                /* Unterstreichung der Links entfernen */
  font-weight: 600;                     /* Schrift wird etwas fetter */
  padding: 5px 10px;                    /* Innenabstand: 5px oben/unten, 10px rechts/links */
  transition: background-color 0.3s ease; /* Sanfter Übergang bei Farbänderungen im Hintergrund */
}


nav a:hover {
  text-decoration: underline;       /* Link wird unterstrichen beim Überfahren mit der Maus */
  background-color: #e6f0ff;        /* Heller blauer Hintergrund erscheint */
  border-radius: 4px;                /* Die Ecken des Hintergrunds werden abgerundet */
}


/* Responsive für kleine Bildschirme */
@media (max-width: 600px) {
  nav a {
    display: block;
    margin: 10px 0;
    padding: 10px;
    font-size: 1.1em;
  }
}


a.projektkarte {
  text-decoration: none;    /* keine Unterstreichung */
  color: inherit;           /* übernimmt Farbe vom Eltern-Element */
}

a.projektkarte h3,
a.projektkarte p {
  color: inherit;              /* explizit schwarze Schrift */
  text-decoration: none;    /* falls Browser Überschrift unterstreichen würde */
}

a.projektkarte:hover h3,
a.projektkarte:hover p {
  color: #0066cc;              /* auch beim Hover: kein Farbwechsel */
  text-decoration: none;
}





.flag-bar {
  height: 30px;
  background: linear-gradient(to bottom, black 33.33%, red 33.33% 66.66%, gold 66.66%);
}

.text-rot {
  color: red;
}
.text-blau {
  color: #007BFF;
}

.projekt {
  margin-bottom: 40px;
}

.bilder {
  display: flex;
  gap: 20px;
  margin-top: 10px;
}

.projektbild {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.start-links {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  margin: 40px auto;
}

.start-button {
  display: block;
  text-align: center;
  background-color: #0066cc;
  color: white;
  padding: 20px 30px;
  font-size: 1.2em;
  border-radius: 8px;
  text-decoration: none;
  max-width: 300px;
  width: 100%;
  transition: background-color 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.start-button:hover {
  background-color: #004c99;
}