/* Platz unter fixed Header schaffen */
body{scroll-padding-top:64px}

/* =========================
   Hero
========================= */
.hero{
  position:relative;
  margin-top: 0;            /* <- vorher 64px, jetzt 0 */           /* Höhe der Header-Bar */
}
.hook-Image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 0;
}
.hero::after{                   /* dunkles Overlay */
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);   /* oder dein Gradient */
  z-index: 1;                    /* Overlay über Bild */
}
.hero-overlay{
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
  text-align: center;
  padding: 0 50px;
  z-index: 2;    
}
.hero-hooktext{
    transform: translateY(60px); /* auf kleinen Bildschirmen weniger Verschiebung */
    margin-bottom: 100px;
}

/* =========================
   About me
========================= */
.about-me{ background:#f5f7f5; padding:100px 0; display: flex;justify-content: center; align-items: center;gap: 100px; flex-wrap: wrap;}
.about-me .container{ width: 600px; max-width: 90%; }
.about-me h3{ text-align:left; }
.about-me p{ text-align:justify;}
.about-me img{
  width:400px;
  height:500px;
  object-fit:cover;
  box-shadow:0 6px 24px rgba(0,0,0,.12);
  border-radius: var(--radius);
}
/* =========================
   About expectations
========================= */
.about-expectations{ background:#fff; padding:100px 0; display: flex;justify-content: center; align-items: center;gap: 100px; flex-wrap: wrap;}
.about-expectations .container{ width: 1100px; max-width: 90%; }
.about-expectations h3{ text-align:center; }
.about-expectations p{ text-align:justify;}
/* =========================
   About philosophy
========================= */
.about-philosophy{ background:#f5f7f5; padding:100px 0; display: flex;justify-content: center; align-items: center;gap: 100px; flex-wrap: wrap;}
.about-philosophy .container{ width: 600px; max-width: 90%; }
.about-philosophy h3{ text-align:center; }
.about-philosophy p{ text-align:justify;}
.about-philosophy img{
  width:400px;
  height:500px;
  object-fit:cover;
  box-shadow:0 6px 24px rgba(0,0,0,.12);
  border-radius: var(--radius);
}

@media (max-width: 800px){
  .hero {
    height: 800px; /* feste Höhe einstellen */
    overflow: hidden; /* alles Überstehende abschneiden */
  }

  .hero .hook-Image {
    width: 100%;
    height: 800px;
    object-fit: cover; /* Bild wird beschnitten, behält AR */
    object-position:center;
    
  }

  .hero-overlay {
    padding: 0 20px; /* etwas schmalere Abstände für Text */
  }
    /* Buttons untereinander */
  .hero-buttons{
    flex-direction: column;   /* statt nebeneinander */
    gap: 14px;                /* Abstand zwischen den Buttons */
    align-items: center;      /* mittig ausrichten */
  }

  /* (Optional) Headline/Abstand etwas kompakter */
  .hero-hooktext{
    transform: translateY(60px);
    margin-bottom: 24px;
  }
}