body{
    background-color:rosybrown;
    color: rgb(92, 64, 51); /*Änder alle Schriftfarbe*/
    font-family: "Roboto", sans-serif;
    margin: 80px auto;     /* zentriert den Block horizontal */
    text-align: center;    /* Bild und Text zentrieren */
}
html, body {
    margin: 0;
    padding: 0;
}

/*Nav*/
nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(188, 143, 143, 0.9);
  z-index: 1000;
  font-size: 22px; 
}

.logo{
  font-weight: 800;
}

.nav-container {
  max-width: 1200px;    /* begrenzt Breite */
  margin: 0 auto;       /* zentriert */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;        /* nur innen Abstand */
}
.menu{
    display: flex;
    gap: 16px;
}
.menu-link{
    color:white; /*Textfarbe in weiß*/
    text-decoration: none; /*Keine Untersteichungen durch das none*/
    margin-left: 16px;
    transition: transform 0.3s ease, background-color 0.3s ease; /*lässt das Vergrößern verlangsamen (smoother)*/
}
.menu-link:hover{
    text-decoration: underline;
    transform: scale(1.05);  /*Lässt die Schrift beim hovern vergrößern*/
}
.logo-image{
    width: 20%;
    object-fit: contain; /*Zeigt das gesamte Bild ohne Verzerrung*/
    height: auto;
}

/*main*/
main{

}
.home-image {
    position: absolute; /* statt fixed */
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    filter: brightness(0.75); /*Bilder dunkler machen, bei 1 bleibt es original. Wir brauchen etwas zwischen 0.5 und 1*/
    z-index: -1; /* bleibt im Hintergrund */
}

.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: flex-start;   /* vertikal mittig */
}

h1 {
  position: relative; 
  margin-left: 10%;     /* Abstand vom linken Rand */
  max-width: 600px;      /* Breite begrenzen */
  font-size: 70px;
  color: white;
  text-shadow: 10px 10px rgba(0,0,0,0.5);
  animation: slide-in 1.8s ease forwards;
  opacity: 0;
  text-align: left;      /* GANZ wichtig → linksbündig */
  line-height: 1.2;      /* gleichmäßiger Abstand zwischen Zeilen */
}
.rosybrown{
    color: rosybrown;
}
@keyframes slide-in {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
h2{
    text-align: center;
    font-size: 45px;
}
.anfahrt {
    text-align: center;  /* Text und Map zentrieren */
    margin: 40px 0;      /* Abstand oben/unten */
    
}
p, .content-image, .content-image-sarah {
    max-width: 700px;      /* gleiche maximale Breite für Text und Bilder */
    margin-left: auto;     /* zentriert den Block */
    margin-right: auto;
}

p {
    margin-bottom: 20px;
    font-size: 30px;
    text-align: justify;
    padding: 0 30px;       /* Abstand links/rechts im Text */
}

.content-image {
    display: block;
    height: auto;
    width: 100%;           /* Bild füllt die max-width vollständig */
    border-radius: 16px;
}

.content-image-sarah{
  display: block;
  height: auto;
  width: 50%;
  border-radius: 16px;
}
.google-maps{
    width: 100%;
    max-width: 700px;
    height: 400px;
    border: 0;
    border-radius: 16px;   /*Runde Ecken */
}
/* Über mich Section */
#uebermich {
  background: #fff;                  /* heller Hintergrund für Kontrast */
  color: rgb(92, 64, 51);
  border-radius: 20px;               /* weiche Ecken */
  max-width: 900px;                  /* nicht zu breit */
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  text-align: center;
  animation: fade-in 1.2s ease-in;   /* sanfter Effekt beim Laden */
  min-height: auto;      /* überschreibt die globale Höhe */
  padding: 40px 30px;    /* etwas kompakteres Padding */
  margin: 40px auto;     /* weniger Abstand oben/unten */
}

#uebermich h2 {
  font-size: 48px;
  color: rosybrown;
  margin-bottom: 20px;
}

#uebermich h3 {
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 30px;
  color: rgb(120, 90, 70);
}

#uebermich p {
  font-size: 20px;
  line-height: 1.6;
  text-align: justify;
}

/* Animation */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*Footer*/
a {
    color: rgb(92, 64, 51);   /* hier die gewünschte Farbe eintragen */
    text-decoration: none;
    transition: transform 0.3s ease, color 0.3s ease; /* smooth Effekt beim Hover */
}
a:hover{
    transform: scale(1.1);    /* 10% größer */
}
section{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
html{
    scroll-behavior: smooth;
}
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(188, 143, 143, 0.9);
  z-index: 1000;
  font-size: 22px;
}
section {
  padding-top: 80px; /* Höhe der Nav anpassen */
  box-sizing: border-box;
}

/* Standard: Desktop */
.menu {
  display: flex;
  gap: 16px;
}
.nav-toggle,
.nav-toggle-label {
  display: none; /* Hamburger-Icon am Desktop unsichtbar */
}



/* Mobile Ansicht */
@media (max-width: 768px) {
  /* Links verschwinden */
  .menu {
    display: none;
    flex-direction: column;
    background: rgba(188,143,143,0.95);
    position: absolute;
    top: 70px;
    right: 0;
    width: 100%;
    padding: 20px 0;
    text-align: center;
  }

  .menu a {
    padding: 10px;
    font-size: 18px;
  }

  /* Checkbox bleibt unsichtbar */
  .nav-toggle {
    display: none;
  }

  /* Hamburger-Icon NUR hier sichtbar */
  .nav-toggle-label {
    display: flex;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
  }

  .nav-toggle-label span {
    display: block;
    width: 25px;
    height: 3px;
    background: white;
    border-radius: 3px;
  }

  /* Wenn Checkbox aktiv → Menü sichtbar */
  .nav-toggle:checked + .nav-toggle-label + .menu {
    display: flex;
  }
}