/* Grundlegendes Layout für die Seite */
body {
    font-family: Arial, Helvetica, sans-serif; /* Schriftart für die ganze Seite */
    margin: 0;                                 /* Entfernt Außenabstand */
    padding: 0;                                /* Entfernt Innenabstand */
    background-color: #f9f9f9;                 /* Helles Grau als Seitenhintergrund */
}

/* Header-Bereich oben (Logo und Unterzeile) */
#head1 {
    display: flex;                             /* Flexbox-Layout aktivieren */
    flex-direction: column;                    /* Elemente untereinander anordnen */
    align-items: center;                       /* Horizontal zentrieren */
    text-align: center;                        /* Text ebenfalls zentriert */
    padding: 20px;                             /* Innenabstand */
}

/* Logo im Header */
#head1 img {
    height: 200px;                             /* Maximale Höhe */
    max-width: 100%;                           /* Verkleinert sich bei kleineren Bildschirmen */
}

.navigation {
    text-align: center;
    background-color: #279FFD;
    padding: 0;
    color : white;
}

.navigation a {
    display:inline-block;
    color: white;
    padding: 12px 15px;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}

.navigation a:hover {
    background-color: aliceblue;
    color: black;
}

/* Container für alle Projektboxen */
#projects {
    display: flex;                             /* Boxen nebeneinander anordnen */
    flex-wrap: wrap;                           /* Umbrechen bei kleinerer Bildschirmbreite */
    justify-content: center;                   /* Inhalt zentrieren */
    gap: 20px;                                 /* Abstand zwischen Boxen */
    padding: 20px;                             /* Innenabstand um die ganze Sektion */
}

/* Linkdekoration aua! */
#projects a{
    text-decoration: none;
    color: black;
}

/* Einzelne Projekt-Box */
.project {
    background-color: #fff;                    /* Weißer Hintergrund */
    border-radius: 10px;                       /* Abgerundete Ecken */
    border: 1px solid #ccc;                    /* Dünner grauer Rahmen */
    width: 300px;                              /* Feste Breite */
    padding: 20px;                             /* Innenabstand */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Schlagschatten */
    text-align: center;                        /* Text zentriert */
    transition: transform 0.2s, box-shadow 0.2s; /* Animation bei Hover */
}

/* Effekt beim Überfahren der Box mit der Maus */
.project:hover {
    transform: translateY(-5px);               /* Leichtes Anheben */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);/* Stärkerer Schatten beim Hover */
}

/* Überschrift der Box */
.project h2 {
    margin-top: 0;                             /* Kein Abstand oben */
}

/* Aufzählungsliste innerhalb der Projektbox */
.project ul {
    list-style-type: disc;                     /* Standard-Aufzählung (Punkte) */
    padding-left: 20px;                        /* Einzug für die Liste */
    text-align: left;                          /* Text linksbündig */
    margin: 15px auto 0;                       /* Oberer Abstand, zentriert (auto links/rechts) */
    display: inline-block;                     /* Behält Breite wie Inhalt */
}

/* Bilder innerhalb der Projektboxen */
.project img{
    border: 1px solid black;
    width: 280px; border-radius: 10px;
    height: 260px;
}

.project hr{
    border: 1px solid;
}

.normaleBox{
    background-color: #fff;                    /* Weißer Hintergrund */
    border: 1px solid #ccc;                    /* Dünner grauer Rahmen */
    border-radius: 10px;                       /* Abgerundete Ecken */
    width: 800px;                              /* Feste Breite */
    padding: 20px;                             /* Innenabstand */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Schlagschatten */
    text-align: center;                        /* Text zentriert */
    transition: transform 0.2s, box-shadow 0.2s; /* Animation bei Hover */
}

#footer{
    text-align: center;
    font-size: 12px;
}

.footer2{
    text-decoration: none;
    color: black;
}

/*######### E-MAIL Formular ############ */
form {
  max-width: 600px;
  margin-top: 20px;
}

input, textarea {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: black 1px solid;
  border-radius: 10PX;
}

button {
  background-color: #007aff;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

button:hover {
  background-color: #005bb5;
}


/* Responsive Layout für Tablets: zwei Boxen pro Zeile */
@media (max-width: 1000px) {
    .project {
        width: 45%;                            /* Statt 300px → 45% Breite */
    }
}

/* Responsive Layout für Smartphones: eine Box pro Zeile */
@media (max-width: 600px) {
    .project {
        width: 90%;                            /* Fast volle Breite */
    }
}