/* ==========================================================================
   GLOBALE STYLES & SEITEN-GERÜST
   ========================================================================== */
body {
  margin: 0;
  background: #FEFBF3;
  font-family: Arial, sans-serif;
}

.seite {
  max-width: 1200px;
  margin: 0 auto;
  background: #FEFBF3;
  padding: 0px;
}

.header-link {
  text-decoration: none;
  color: inherit;
}

/* Holt das "Herzlich Willkommen" näher an den Header heran */
.welcome-wrapper h1 {
  margin-top: 10px; /* Reduziert den standardmäßigen Browser-Abstand nach oben */
  margin-bottom: 20px;
}

/* ==========================================================================
   HEADER-BEREICH (CANVAS, LOGO & TEXT)
   ========================================================================== */
.canvas-gruen {
  width: 100%;
  height: 350px;
  position: relative; 
  overflow: visible; /* Erlaubt es dem Logo, über den Rand zu ragen */
}

/* Ein reines Hintergrund-Element, das die grüne Form darstellt */
.canvas-hintergrund-gruen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #2c523e;
  z-index: 1;
  clip-path: polygon(
    0% 0%,     /* oben links */
    100% 0%,   /* oben rechts */
    100% 40%,  /* unten rechts */
    0% 100%    /* unten links */
  );
}

/* DESKTOP: Textbereich exakt mittig positioniert */
.header-text {
  font-family: 'Garamond', Times, serif;
  position: absolute;
  left: 50%;          /* Zentrierung von links */
  top: 50%;           /* Zentrierung von oben */
  transform: translate(-50%, -50%); /* Gleicht den eigenen Mittelpunkt aus */
  text-align: center; /* Text innerhalb des Containers zentrieren */
  color: #fff2ce;     
  z-index: 10;        /* Liegt über dem grünen Hintergrund */
  max-width: 80%;     /* Mehr Platz für zentrierten Text einräumen */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 6.6);
}
 
/* Großer Haupttext */
.header-text h2 {
  font-size: 3.2rem;   
  font-weight: bold;
  margin: 0 0 3px 0;   
  letter-spacing: 0.5px;
}

/* Kleinerer Text darunter */
.header-text p {
  font-size: 2.6rem;
  margin: 0;
  opacity: 0.9;     
  color: #c5a872;
}

/* Die weiße/goldene Trennlinie entlang des Pfades */
.pfad-linie {
  position: absolute;
  left: 50.7%; 
  width: 49.3%; 
  height: 100%;
  background-color: #ceb078;
  z-index: 2; 
  clip-path: polygon(
    0% 0%,     
    100% 0%,   
    100% 40%,  
    21% 63%    
  );
}

/* Das Hintergrundbild */
.canvas-gruen img.bg-image {
  position: absolute;
  left: 51%; 
  height: 100%; 
  width: 49%;  
  object-fit: cover;
  z-index: 3; 
  clip-path: polygon(
    0% 0%,     
    100% 0%,   
    100% 40%,  
    21% 63%    
  );
}

/* Das PNG-Logo ragt nach unten heraus */
.header-logo {
  position: absolute;
  right: 50px;      
  top: -20px;        
  width: 170px;     
  height: 337px;    
  object-fit: contain;
  z-index: 20;      
}

/* ==========================================================================
   GLOBALER FOOTER
   ========================================================================== */
.footer-links {
  text-align: center;
  margin: 60px 0 30px 0;
  font-family: 'Garamond', serif;
  font-size: 0.9rem;
  opacity: 0.5;
}

.footer-links a {
  color: #2c523e;
  text-decoration: none;
  margin: 0 10px;
  transition: 0.3s ease;
}

.footer-links a:hover {
  opacity: 0.9;
}

/* ==========================================================================
   RESPONSIVE LAYOUTS (MOBILANPASSUNGEN FÜR GLOBALEN HEADER)
   ========================================================================== */
@media screen and (max-width: 900px) {
  /* Header-Höhe deutlich reduziert */
  .canvas-gruen {
    height: 100px; 
  }

  /* Clip-Path flacher machen, passend zur neuen Höhe */
  .canvas-hintergrund-gruen {
    clip-path: polygon(
      0% 0%,
      100% 0%,
      100% 45%,
      0% 100%
    )
  }

  /* Bild-Anpassung an die neue Höhe */
  .canvas-gruen img.bg-image {
    left: 45%;
    width: 55%;
    clip-path: polygon(
    0% 0%,     
    100% 0%,   
    100% 45%,  
    17% 69%    
    )
  }

  /* MOBIL: Text zurück in die obere linke Ecke schieben */
  .header-text {
    top: 10px; 
    left: 15px;
    transform: none;    /* Hebt die zentrierte Verschiebung von Desktop auf */
    text-align: left;   /* Richtet den Text wieder linksbündig aus */
    max-width: 80%; 
  }

  .header-text h2 {
    margin: 0 0 1px 0; 
    font-size: clamp(0.9rem, 4vw, 1.8rem); 
  }

  .header-text p {
    font-size: clamp(1.0rem, 3.5vw, 1.3rem);
    text-align: left;   /* Explizit linksbündig für Mobilgeräte */
  }

  /* LOGO & PFAD-LINIE MOBIL KOMPLETT AUSBLENDEN */
  .header-logo,
  .pfad-linie {
    display: none;
  }

  /* Holt das "Herzlich Willkommen" mobil noch ein Stück näher ran */
  .welcome-wrapper h1 {
    margin-top: 5px; 
  }
}
/* ==========================================================================
   HEADER-BEREICH (ZUSATZ FÜR EICHENLAUB)
   ========================================================================== */

/* DESKTOP: Positionierung oben links mit 80px Höhe */
.header-eichenlaub {
  position: absolute;
  top: 15px;
  left: 20px;
  height: 200px;
  width: auto;         /* Behält das Seitenverhältnis bei */
  object-fit: contain;
  z-index: 20;         /* Liegt stabil über dem grünen Hintergrund */
}


/* ==========================================================================
   RESPONSIVE LAYOUTS (ANPASSUNG IM BESTEHENDEN MEDIA-QUERY)
   ========================================================================== */
@media screen and (max-width: 900px) {
  
  /* ... (Deine anderen bestehenden Mobil-Styles) ... */

  /* MOBIL-ANPASSUNG FÜR DAS EICHENLAUB:
     Da der Header mobil nur 100px hoch ist und der Text nach links rückt,
     verkleinern wir das Eichenlaub und passen die Position an, damit es nicht überlappt. */
  .header-eichenlaub {
    top: 5px;
    left: 10px;
    height: 70px;     /* Deutlich kleiner für den schmalen Mobil-Header */
  }

  /* Verschiebt den Mobil-Text leicht nach rechts, um Platz fürs kleine Eichenlaub zu machen */
  .header-text {
    top: 10px; 
    left: 55px;       /* Von 15px auf 55px erhöht */
    transform: none;    
    text-align: left;   
    max-width: 80%; 
    margin-top: 10px;
    margin-left: 5px;
  }

  /* ... (Restliche Mobil-Styles wie .header-logo { display: none; } etc.) ... */
}