/*
--------------------------------------------------------
    Stylesheet für meine Webseite
    Autor: Julia
    Datum: 15.08.2025
    Beschreibung: Grundlegendes Seitendesign
--------------------------------------------------------
*/

/* Allgemeine Seite */
body {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 200; /* dünnerer Schnitt */
  font-size: 1.1rem;
  text-align: center;
  line-height: 1.1;
  margin:0;
  background-color:white;
  padding: 0;
  overflow-x: hidden;
}

/*Site-Header*/
header {
display: flex;
justify-content: space-between; /* Logo links, Menü rechts */
align-items: center;
flex-wrap: wrap;                /* damit sich Layout bei kleinen Geräten anpasst */
padding: 10px 5%;
position: relative;
}

/* Logo-Bild */
  .logo img {
  height: auto; /* 80px anpassen je nach Bildgröße */
  max-width: 180px;
  top: 0;
  left: 0;
  padding: 40px 40px;
  position: absolute;
  }

/*Menü*/    
/* Navigation */  

/* Desktop Menü */
.navbar {
  display: block;
}
/* 
  .navbar {
    text-align: right;
    top: 2.5%;
    right: 2px;
    padding: 40px 20px;
    }

    .navbar ul {
      list-style: none;
      display: flex;
      gap: 20px;
      margin: 0;
      padding: 0;
      align-items: flex-start;
    }
    
    .navbar li {
      display: inline-block;
    }

    nav a {
      text-decoration: none;
      color: black; 
      font-size: 1.2rem;
      transition: color 0.3s;
    }

    nav a:hover {
      color: rgb(165, 25, 54);
    }

    */

/* Bürgermenü verstecken*/
.menue {
    display: none;
}

/* Rote Streifen */
  .red-lines {
    width: 100%;
    position: relative;
    margin: 20px 0;

  /*   margin:  */
  }
  .red-lines::before,
  .red-lines::after {
    content: "";
    display: block;
    height: 2px;             /* Streifendicke */
    background:  rgb(165, 25, 54);     /* Rot-Ton anpassen */
    width: 100%;
  }
  .red-lines::after {
    margin-top: 6px;         /* Abstand zwischen den Linien */
  }

  .map-container {
    width: 100%;        /* nutzt gesamte Bildschirmbreite */
    max-width: 1200px;  /* vorher 900px – z. B. auf 1200px erhöhen */
  }

iframe {
    width: 100%;
    height: 600px; /* vorher 450px – größer machen */
    border: 0;
}

    /* Oberer Streifen mit Hintergrundbild */
    .banner {
      position: relative;
      width: 100%;
      height: 200px; /* Höhe des Streifens anpassbar */
      background: url('Hintergrund_Laden.JPG') center/cover no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    /* Transparente Schicht über dem Bild */
    .banner::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(255, 255, 255, 0.5); /* halbtransparent */
      z-index: 0;
    }

    /* Text über dem Banner */
    .banner h1 {
      position: relative;
      z-index: 1;
      color: rgb(165, 25, 54);
      font-family: 'Roboto', Arial, Helvetica, sans-serif;
      font-weight: 50; /* dünnerer Schnitt */
      font-size: 3rem;
      text-shadow: 2px 2px 5px rgba(0,0,0,0.2);
      margin: 0;
    }

/* Inhalt */
  .content {
    padding: 40px 10%;

  }

/* Kontaktformular */
.container{
  max-width:var(--maxwidth);
  margin:40px auto;
  padding:20px;
}

.form{
  display:flex;
  gap:30px;
  background:var(--card);
  padding:30px;
  border-radius:var(--radius);
  box-shadow:0 6px 22px rgba(0,0,0,0.06);
  align-items: center;
}

/* columns */
.column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* left column smaller */
.left{flex:0.9}
.right{flex:1.1}


/* checkboxes */
.checkbox-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:10px 0;
  color:#3c4852;
}
.checkbox-row input[type="checkbox"]{
  margin-top:4px;
  width:18px; height:18px;
}

/* subfields below checkboxes */
.subfield{
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 200; /* dünnerer Schnitt */
  font-size: 1.1rem;
  width: 20%;
  padding: 0.6em;
  margin-top: 0.4em;
  border: 1px solid #ccc;
  border-radius: 5px;
  align-items: center;
}

/* right inputs */
.right input[type="text"],
.right input[type="email"],
.right textarea{
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 200; /* dünnerer Schnitt */
  font-size: 1.1rem;
  width: 20%;
  padding: 0.6em;
  margin-top: 0.4em;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* zentriert */
.right input[type="text"],
.right input[type="email"],
.right textarea,
.subfield,
.kontakt-form button {
  width: 100%;
  max-width: 400px;
  margin: 0.4em auto;
}

/* consent */
.consent{
  display:flex;
  gap:10px;
  align-items:center;
  font-size:13px;
  color:var(--muted);
  margin:8px 0 12px 0;
}
.consent input{ width:16px; height:16px }


.kontakt-form label {
  display: block;
  margin-top: 1em;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 200; /* dünnerer Schnitt */
  font-size: 1.1rem;
}

.kontakt-form button {
  margin-top: 1.5em;
  width: 20%;
  padding: 0.8em;
  border: none;
  background-color: rgb(165, 25, 54);;
  color: white;
  border-radius: 5px;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.3s ease;
  align-items: center;
}

.kontakt-form button:hover {
  background-color: rgb(165, 25, 54);;
}

/* --- Fußzeile --- */
.footer-bar {
background-color: rgba(165, 25, 54, 0.3);
color: black;
text-align: center;
margin-top: 50px;
padding: 20px 10px;
font-size: 0.9rem;
}

.footer-bar .rechtliches {
display: flex;
font-size: 1.1rem;
justify-content: center;  /* zentriert horizontal */
gap: 30px;                /* Abstand zwischen Impressum und AGB */
margin-bottom: 30px;      /* kleiner Abstand zum Copyright */
}

/* Links stylen */
.footer-bar a {
color: black;
text-decoration: none;
transition: color 0.3s;
}

.footer-bar a:hover {
color: rgb(165, 25, 54); /* Rot beim Überfahren */
}



/* -------------------------------------------------------
 RESPONSIVE DESIGN
------------------------------------------------------- */

/* Tablets */
@media (max-width: 900px) {
header {
  flex-direction: column;
  align-items: center;
}

.logo img {
  max-width: 150px;
}

.HomepagePic img {
  max-width: 90%;
}

.content {
  padding: 30px 8%;
}
}

/* Smartphones */
@media (max-width: 900px) {
/* Burger-Menü aktivieren */


  /* Normales Menü ausblenden */
  .navbar {
    display: none;
  }

  /* Burger anzeigen */
  .menue {
    display: block;
    font-size: 2rem;
    cursor: pointer;
    position: absolute;
    top: 30px;
    right: 25px;
    color: rgb(165, 25, 54);
  }

  /* Mobile Menü standardmäßig versteckt */
  .navbar-mobile {
    display: none;
    background: white;
    border-top: 2px solid rgb(165, 25, 54);
    padding: 20px 0;
    width: 100%;
  }

  /* Wenn aktiv → anzeigen */
  .navbar-mobile.active {
    display: block;
  }

  /* Mobile Menü Styling */
  nav ul {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  nav a {
    font-size: 1.1rem;
  }
}

.logo img {
  max-width: 100px;
}

/* Rote Streifen */
.red-lines {
  width: 100%;
  position: relative;
  margin: 70px 0;
}

.content {
  padding: 20px 5%;
}

.footer-bar {
  font-size: 0.8rem;
}