/*
  Datei: styles/style.css
  Basis-Styling für die GaLaBau Webseite
*/

/* --- 1. Allgemeine und Reset-Regeln --- */
body {
  font-family: Arial, sans-serif;
  line-height: 1.4;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4; /* Sehr helles Grau */
  color: #333; /* Dunkelgrauer Text */
}
body.bg-pattern {
  background-image: linear-gradient(rgba(244, 244, 244, 0.30), rgba(244, 244, 244, 0.30)), url('images/bild12.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Bild bleibt beim Scrollen fixiert */
  background-repeat: no-repeat;
}

/* Container, um den Inhalt zu zentrieren und zu begrenzen */
header, 
main {
  max-width: 80%;
  margin: 0 auto;
  padding: 0 20px;
}

.header-logo {
  max-height: 180px;
  height: auto;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 0 10px;
}
  .header-kontakt {
  text-align: left;           /* Richtet den Text nach links aus */
  padding-right: 30px;         /* Erzeugt den gewünschten Rand nach rechts */
  max-width: 600px;            /* Drückt den Text zusammen (Wert beliebig anpassen) */
  align-self: flex-end;        /* Schiebt den Kontaktbereich an den unteren Rand des Headers */
  margin-bottom: 0px;         /* Optional: Etwas Abstand zur unteren Trennlinie */
}

h1, h2, h3, h4 {
  font-family: Arial, sans-serif;
  color: #1a5319; /* Dunkles, sattes Grün */
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

a {
  color: #4caf50; /* Klassisches, helles Grün */
  text-decoration: none; /* Keine Unterstreichung bei Links */
}

a:hover {
  text-decoration: underline;
}

/* --- 2. Kopfzeile (Header, als Flexbox Container) und Navigation --- */
header {
  background-color: #ffffff;
  padding: 1px 0;
  border-bottom: 3px solid #6b8e23; /* Olivegrüner Trennstrich */

/* FLEXBOX FÜR LINK/RECHTS-LAYOUT */
  display: flex;
  justify-content: space-between; /* Drückt links und rechts an die Ränder */
  align-items: flex-end;            /* Richtet Logo Block und Kontakt Block unten bündig aus */
  flex-wrap: wrap;                /* Sorgt für Umbruch auf Smartphones */

}

header p {
  color: #1a5319;
  font-size: 1.2em;
  font-weight: bold;
  margin: 0;

}
/* Spezifisch für das Logo-Text-Feld */
.header-logo p {
  padding-left: 0; /* Statt 40px, damit das Logo und der Text links sauber abschließen */
  margin-top: 10px;
}

/* Kontakt-Bereich auf der rechten Seite */
.header-kontakt {
  text-align: left; /* Rechtsbündig sieht im Header meist aufgeräumter aus */
  margin-bottom: 0;
}

.header-kontakt p {
  margin-bottom: 1px; /* Kleiner Abstand zwischen Mobil und E-Mail */
}

/* Links im Kontaktbereich bekommen genau dieselbe Farbe wie der Text (#1a5319) */
.header-kontakt a {
  color: inherit; 
  text-decoration: none;
}

.header-kontakt a:hover {
  text-decoration: underline;
}

/* Navigationsleiste */

nav {
  width: 100%;                    /* Falls die Navigation unter Logo/Kontakt stehen soll */
  margin-top: 40px;
}


nav ul {
  list-style: none;
  font-size: 1.2em;
  padding: 0 26px;
  margin: 0;
  display: flex; /* Elemente nebeneinander anordnen */
  gap: 80px;
}

nav a {
  color: #333;
  font-weight: bold;
  padding: 0 10px;
  transition: color 0.3s;
}

nav a:hover {
  color: #6b8e23; /* Wechselt zu Olivegrün beim Hover */
  text-decoration: none;
}

/* --- 3. Hauptinhaltsbereiche (Main Sections) --- */
main section {
  padding: 40px 0;
  margin-bottom: 20px;
  background-color: #ffffff;
  border-radius: 8px; /* Leicht abgerundete Ecken */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Hero Sektion index */
#hero {
background-color: transparent;
 text-align: center;
  padding: 160px 160px;
  margin-top: 10px;
  
  /* WICHTIG: Damit das Pseudo-Element absolut positioniert werden kann */
  position: relative;
  
  /* Optional: Falls der Text auf dem hellen Bild schwer lesbar ist */
  color: #333; 
}

/* Pseudo-Element für das transparente Hintergrundbild */
#hero::before {
  content: ""; /* Notwendig, damit das Pseudo-Element angezeigt wird */
  
  /* Das Pseudo-Element soll den gesamten Hero-Bereich ausfüllen */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
border-radius: 8px; /* Leicht abgerundete Ecken */
  
  /* Hinter den Textinhalt schieben */
  z-index: -1;

  /* --- Die Hintergrundbild-Eigenschaften --- */
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('images/bild11.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* --- HIER STEUERST DU DIE TRANSPARENZ --- */
  /* Wert zwischen 0.0 (komplett unsichtbar) und 1.0 (voll sichtbar) */
  opacity: 1.0; 
/* Entspricht 80% Sichtbarkeit (sehr transparent) */
}

#hero h2 {
  font-size: 3em;
  color: #ffffff;
}

#hero h1 {
  font-size: 1em;
  color: #ffffff;
}

/* Hero-uns Sektion index */
#hero-uns {
background-color: transparent;
 text-align: center;
  padding: 160px 160px;
  margin-top: 10px;
  
  /* WICHTIG: Damit das Pseudo-Element absolut positioniert werden kann */
  position: relative;
  
  /* Optional: Falls der Text auf dem hellen Bild schwer lesbar ist */
  color: #333; 
}

/* Pseudo-Element für das transparente Hintergrundbild */
#hero-uns::before {
  content: ""; /* Notwendig, damit das Pseudo-Element angezeigt wird */
  
  /* Das Pseudo-Element soll den gesamten Hero-Bereich ausfüllen */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
border-radius: 8px; /* Leicht abgerundete Ecken */
  
  /* Hinter den Textinhalt schieben */
  z-index: -1;

  /* --- Die Hintergrundbild-Eigenschaften --- */
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('images/bild88.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* --- HIER STEUERST DU DIE TRANSPARENZ --- */
  /* Wert zwischen 0.0 (komplett unsichtbar) und 1.0 (voll sichtbar) */
  opacity: 1.0; 
/* Entspricht 80% Sichtbarkeit (sehr transparent) */
}

#hero-uns h2 {
  font-size: 3em;
  color: #ffffff;
}

#hero-uns h1 {
  font-size: 1em;
  color: #ffffff;
}

/* Hero-daten*/
#hero-daten {
background-color: #EBF5E0; 
 text-align: left;
  padding: 20px 20px;
  margin-top: 20px;
}

#hero-daten h2 {
  font-size: 2em;
  color: #1a5319;

}

#hero-daten h3 {
  font-size: 1em;
  color: #1a5319;

}

/* Leistungsübersicht */
#uebersicht-leistungen {
  text-align: center;
}

.leistungskarten-container {
  display: flex;
  justify-content: space-around;
  gap: 20px;
  flex-wrap: wrap; /* Wichtig für Responsivität */
  margin-top: 1px;
}

.leistungskarten-container article {
  flex: 1; /* Gleiche Breite für die Artikel */
  min-width: 250px;
  padding: 30px;
  background-color: #f9f9f9;
  border-radius: 6px;
  border-top: 5px solid #6b8e23;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* --- 4. Schaltflächen (Buttons) --- */
.button-primary, 
.button-secondary {
  display: inline-block;
  padding: 12px 25px;
  margin-top: 20px;
  border-radius: 5px;
  font-weight: bold;
  text-transform: uppercase;
  transition: background-color 0.3s;
}

.button-primary {
  background-color: #4caf50; /* Kräftiges Grün */
  color: #ffffff;
  border: 2px solid #4caf50;
}

.button-primary:hover {
  background-color: #1a5319; /* Dunkler beim Hover */
  text-decoration: none;
}

.button-secondary {
  background-color: transparent;
  color: #4caf50;
  border: 2px solid #4caf50;
}

.button-secondary:hover {
  background-color: #ebf5e0;
  text-decoration: none;
}

/* --- 5. Fußzeile (Footer) --- */
footer {
width: 100%;
  background-color: #333333; /* Dunkler Hintergrund */
  color: #cccccc;
  padding: 40px 0;
}
.footer-container {
max-width: 80%;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;

}

footer a {
  color: #ffffff;
}

footer h4 {
  color: #ffffff;
  border-bottom: 1px solid #4caf50;
  padding-bottom: 5px;
  margin-bottom: 15px;
}

footer nav {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-kontakt, 
.footer-navigation {
  display: inline-block;
  vertical-align: top;
  width: 26%;
  padding: 0 10px;
}

.footer-navigation ul {
  list-style: none;
  padding: 0;
}

.footer-navigation li {
  margin-bottom: 5px;
}
.footer-navigation a {
 font-size: 0.9em;
}

.copyright {
  text-align: center;
  margin-top: 15px;
  padding-top: 5px;
  border-top: 1px solid #444444;
  font-size: 0.9em;
}
 .datenschutz-content {
            padding: 10px 40px;
            line-height: 1.8;
            font-size: 0.95em; /* Etwas kleinere Schrift für juristische Texte */
        }

        .datenschutz-content h3 {
            border-bottom: 2px solid #EBF5E0;
            padding-bottom: 5px;
            margin-top: 10px;
            color: #1A5319; /* Dunkles, sattes Grün */
        }

        .datenschutz-block {
            margin-bottom: 25px;
            padding: 15px;
            background-color: #f9f9f9;
            border-left: 5px solid #4CAF50; /* Grüner Akzent */
            border-radius: 4px;
        }
        
        .datenschutz-block p, .datenschutz-block ul {
            margin: 5px 0;
        }

        .datenschutz-block strong {
            color: #333;
        }
.impressum-content {
            padding: 10px 60px;
            line-height: 1.8;
        }

        .impressum-content h3 {
            border-bottom: 5px solid #EBF5E0;
            padding-bottom: 5px;
            margin-top: 10px;
        }

        .kontakt-block {
            margin-bottom: 25px;
            padding: 15px;
            background-color: #f9f9f9;
            border-left: 5px solid #6B8E23; /* Olivegrün als Akzent */
            border-radius: 4px;
        }

        .kontakt-block p {
            margin: 5px 0;
        }
        
        .disclaimer-liste {
            list-style: none;
            padding: 0;
            margin-top: 20px;
        }
        
        .disclaimer-liste li {
            margin-bottom: 10px;
            font-size: 0.95em;
        }
        
        .link-text {
            color: #1A5319; /* Dunkles Grün für die Überschrift des Blocks */
            font-weight: bold;
}
/* ==========================================
   MOBILE OPTIMIERUNG (Media Queries)
   ========================================== */

@media (max-width: 768px) {
  
  /* 1. Inhaltsbereich auf Mobilgeräten verbreitern */
  header, 
  main, 
  footer nav {
    max-width: 100%;
    padding: 0 15px;
  }

  /* 2. Header & Kontakt untereinander anordnen */
  header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px 0;
  }

  .header-kontakt {
    text-align: center;
    padding-right: 0;
    max-width: 100%;
    align-self: center;
    margin-top: 15px;
  }

  /* 3. Navigationsleiste umbrechen & zentrieren */
  nav {
    margin-top: 20px;
  }

  nav ul {
    flex-direction: column;
    gap: 12px;
    padding: 0;
    text-align: center;
  }

  /* 4. Hero-Bereiche (Platzhalter & Textgrößen anpassen) */
  #hero, 
  #hero-uns {
    padding: 60px 20px; /* Reduziert von 160px auf 20px Seitenabstand */
  }

  #hero h2, 
  #hero-uns h2, 
  #hero-daten h2 {
    font-size: 1.8em; /* Schriftgröße für mobile Displays verkleinern */
  }

  /* 5. Leistungskarten untereinander anzeigen */
  .leistungskarten-container article {
    min-width: 100%;
    padding: 20px;
  }

  /* 6. Footer reparieren (Padding-Overkill entfernen) */
  footer nav {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .footer-kontakt, 
  .footer-navigation {
    width: 100%;
    padding: 0; /* Entfernt die sprengenden 180px Padding */
    text-align: center;
  }