/* Basis-Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #333;
    background: linear-gradient(
        to bottom,
        #f9fad7b3,
        #fbfbf9
    );
}
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;
}

/* NAVIGATIONSLEISTE */

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;
}

/* SECTIONS */

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

.sectionboxhead {
    padding-top: 2rem;
    padding-left: 0;
    padding-right: 0;
    margin: 0 auto;
    max-width: 100vw;
    height: 30rem;
    background-image: url('images/pflegebox2.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: -30%;
    box-shadow: inset 55rem 0px 15rem rgba(0, 0, 0, 0.7);
    overflow: none;
}

.sectionboxtext {
    padding: 2rem 3rem;
    margin: 0 auto;
    max-width: 1500px;
}

h2 {
    text-align: center;
}

.body-wrapper {
    padding: 1.5rem;
}

.start-text {
    text-align: center;
}

.section-text {
    text-align: center;
}

.angebot-pic-wrapper {
    margin-top: 3rem;
}

.content-row {
    display: flex;
    align-items: space-around;
    gap: 30px;
}

.text-block {
    max-width: 500px;
}

.angebot-wrapper {
    display: flex;
    justify-content: center;
}

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

.service { 
    flex: 1 1 300px; 
}

.haushaltshilfe {
    text-align: center;
}

.boxen-top {
    text-align: left;
    max-width: 30%;
    margin-top: 4rem;
    padding-left: 3rem;
    color: beige;
}

.boxen-text {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
}

.boxen-texte-left {
    display: flex;
    flex-direction: column;
    text-align: left;
    max-width: 60%;
}

.boxen-texte-right {
    text-align: left;
}

.boxen-vorteile-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.boxen-vorteile-content {
    border: solid 3px;
    border-color: #a4c384ed;
    max-width: 40%;
    padding: 0 1.5rem 1.5rem 1.5rem;
}

.boxen-affiliate-button {
    text-decoration: none;
    padding: 1rem;
    background-color: #a4c384ed;
    color: black;
    border-radius: 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.boxen-affiliate-button:hover {
    color: grey;
    background-color: #a4c384ed;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0);
}

.boxen-service-wrapper {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
}

.boxen-services {
    display: flex;
    justify-content: space-around;
    gap: 3rem;
}

.boxen-service {
    display: flex;
    gap: 0.5rem;
}

.boxen-container {
    text-align: center;
}

.notruf-container {
    text-align: center;
}

.liste {
    display: inline-block;
    text-align: left;
    margin-top: 0;
}

.pricing {
    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');
    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;
    text-align: center;
    padding: 2rem 1rem;
}

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

button:hover {
    background-color: #575757;
}

.about-container {
    display: flex;
    justify-content: space-around;
    gap: 2rem;            /* Abstand zwischen Bild und Text */
    margin-top: 3rem;
    padding: 1rem;
    background-color: #f1ecd9;
    border-radius: 16px;
   /* flex-wrap: wrap;       /* sorgt dafür, dass auf kleinen Bildschirmen Text unter Bild rutscht */
}

.about-text {
    max-width: 700px;
    text-align: left;
}

.about-container img {
    border-radius: 8px;   /* optional, abgerundete Ecken */
}

.about-a {
    text-decoration: none;
    padding: 1rem;
    background-color: #f1ecd9;
    color: black;
    border-radius: 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.about-a:hover {
    color: grey;
    background-color: #f1ecd9;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0);
}

.about-button-wrapper {
    display: flex;
    justify-content: space-around;
    margin-top: 0.5rem;
    background-color: #6f8f6b;
    color: #ffffff;
    border-radius: 16px;
}

.about-button-container {
    display: flex;
    align-items: center;
}

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

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


/* =============================================
   MOBILE RESPONSIVE STYLES (max-width: 768px)
   ============================================= */

@media (max-width: 768px) {

    /* --- Navigation: Hamburger-Menü --- */
    nav {
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .nav-toggle {
        display: block;
        background: none;
        border: none;
        cursor: pointer;
        padding: 1rem;
        color: white;
        font-size: 1.5rem;
        width: 100%;
        text-align: right;
    }

    nav ul {
        display: none;
        flex-direction: column;
        align-items: stretch;
    }

    nav ul.open {
        display: flex;
    }

    nav li {
        margin: 0;
    }

    nav a {
        padding: 0.8rem 1.2rem;
        border-top: 1px solid #444;
    }

    /* --- Header --- */
    header {
        padding: 4rem 1rem;
    }

    /* --- Bild + Text nebeneinander → untereinander (index.html) --- */
    .content-row {
        flex-direction: column;
        align-items: center;
    }

    .content-row img {
        width: 100% !important;
        height: auto !important;
        border-radius: 16px !important;
    }

    .text-block {
        max-width: 100%;
    }

    /* --- About-Seite: Bild + Text untereinander --- */
    .about-container {
        flex-direction: column;
        align-items: center;
    }

    .about-container img {
        width: 100% !important;
        height: auto !important;
    }

    .about-text {
        max-width: 100%;
    }

    /* --- Pflegeboxen: Kopfbereich --- */
    .sectionboxhead {
        height: auto;
        min-height: 15rem;
        background-position: center;
        box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.6);
    }

    .boxen-top {
        max-width: 100%;
        padding: 1.5rem;
        margin-top: 0;
    }

    /* --- Pflegeboxen: Zwei Spalten → eine Spalte --- */
    .boxen-text {
        flex-direction: column;
        gap: 1rem;
    }

    .boxen-texte-left,
    .boxen-texte-right {
        max-width: 100%;
    }

    /* --- Pflegeboxen: Vorteilsbox --- */
    .boxen-vorteile-content {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* --- boxen-affiliate-button --- */
    .boxen-affiliate-button {
        font-size: small;
        text-align: center;
        white-space: normal;   /* Umbruch erlauben */
        word-break: break-word;
    }

    /* --- Pflegeboxen: Service-Icons --- */
    .boxen-services {
        flex-direction: column;
        gap: 1.5rem;
        align-items: flex-start;
    }

    /* --- About-Button-Wrapper --- */
    .about-button-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
        padding: 1rem;
    }

    .sectionboxtext {
        padding: 1.5rem;
    }

}

/* Hamburger-Button auf Desktop ausblenden */
@media (min-width: 769px) {
    .nav-toggle {
        display: none;
    }
}