/* Basis-Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #333;
}
header {
    background-image: url('images/header1.jpeg');
    background-size: cover;       /* Bild füllt den gesamten Header */
    background-position: center;  /* zentriert das Bild */
    background-repeat: no-repeat; /* Bild wird nicht wiederholt */
    color: white;
    padding: 8rem 1rem;           /* mehr Höhe für das Bild */
    text-align: center;
}

nav {
    background-color: #333;
    position: sticky;
    top: 0;
}

nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav li {
    margin: 0 1rem;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 1rem;
    display: block;
}

nav a:hover {
    background-color: #575757;
}

section {
    padding: 4rem 1rem;
    max-width: 1000px;
    margin: 0 auto;
}

h2 {
    text-align: center;
    margin-bottom: 2rem;
}

.services { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 2rem; 
    justify-content: center; 
}

.service { 
    flex: 1 1 300px; 
    text-align: center;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.contact-item a {
  color: inherit;
  text-decoration: none;
}

.contact-item a:hover {
  text-decoration: underline;
}

.icon {
  width: 1.1rem;
  height: 1.1rem;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Telefon-Icon */
.phone-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M6.6 10.8c1.6 3.2 3.4 5 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.3 1.2.4 2.5.6 3.8.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.3 21 3 13.7 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.6.6 3.8.1.4 0 .8-.3 1.1L6.6 10.8z'/%3E%3C/svg%3E");
}

/* E-Mail-Icon */
.mail-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

.contact-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.whatsapp-button {
  position: fixed;              /* schwebender Button */
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  background-color: #25D366;    /* WhatsApp-Grün */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  text-decoration: none;
  z-index: 1000;
}

.whatsapp-button:hover {
  background-color: #1ebe5d;
}

.whatsapp-icon {
  width: 28px;
  height: 28px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='white' d='M16.1 3C9.4 3 4 8.4 4 15c0 2.6.8 5.1 2.4 7.2L4 29l7-2.3c2 .9 4.2 1.4 6.5 1.4 6.7 0 12.1-5.4 12.1-12.1S22.8 3 16.1 3zm0 21.9c-2.1 0-4.2-.6-6-1.7l-.4-.2-4.1 1.3 1.4-4-.3-.4C5.7 18.9 5 17 5 15c0-6.1 5-11.1 11.1-11.1S27.2 8.9 27.2 15 22.2 24.9 16.1 24.9zm6.1-8.4c-.3-.2-1.9-.9-2.2-1s-.5-.2-.7.2-.8 1-.9 1.2-.3.2-.6.1c-.3-.2-1.2-.4-2.2-1.3-.8-.7-1.3-1.6-1.4-1.9-.2-.3 0-.4.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.6s-.7-1.7-.9-2.3c-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.6.1-.9.4s-1.2 1.2-1.2 2.9 1.2 3.4 1.4 3.6c.2.2 2.4 3.6 5.8 5.1.8.3 1.4.5 1.9.6.8.2 1.5.2 2.1.1.6-.1 1.9-.8 2.1-1.5.3-.7.3-1.3.2-1.5-.1-.2-.3-.3-.6-.5z'/%3E%3C/svg%3E");
}

footer {
    background-image: url('images/footer1.jpeg');
    color: white;
    text-align: center;
    padding: 2rem 1rem;
}

button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

.about-container {
    display: flex;
    align-items: center;  /* zentriert Text vertikal neben dem Bild */
    gap: 2rem;            /* Abstand zwischen Bild und Text */
    flex-wrap: wrap;       /* sorgt dafür, dass auf kleinen Bildschirmen Text unter Bild rutscht */
}

.about-container img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;   /* optional, abgerundete Ecken */
}

.about-container p {
    flex: 1;              /* Text nimmt den restlichen Platz ein */
}

.about-a {
    text-decoration: none;
    padding: 1rem;
    background-image: url('images/backgroundimgsmall.jpeg');
    color: white;
    border-radius: 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.about-a:hover {
    color:#d4d4d4;
    background-image: url('images/backgroundimgsmall.jpeg');
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0);
}

.about-button-wrapper {
    text-align: center;
    margin: 1rem;
}

.impressum-a {
    text-decoration: none;
    color: white;
}

.impressum-a:hover {
    color:#575757;            
}