/* ============================== */
/* GENERAL RESET & BASISSTYLING */
/* ============================== */

:root {
    --primary-blue: #0b5c92; /* Dark Blue for buttons/accents */
    --light-aqua: #89CFF0;  /* Start color of gradient */
    --dark-navy: #1E6CC3;   /* End color of gradient */
    --bg-color: #f7f9fb;    /* Light background for the page */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
	background-image:url("wasserhintergrund.png");
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: cover;
	
}
body {
    font-family: 'Poppins', sans-serif; /* Modern und gut lesbar */
    line-height: 1.6;
    color: #333;
    background-color: var(--bg-color);
}

/* ============================== */
/* HEADER & GRADIENT BAR */
/* ============================== */

.top-bar {
    width: 100%;
    position: relative; /* Wichtig für die Positionierung der Kinderelemente */
    z-index: 10;
}

.gradient-strip {
    height: 15px; /* Geforderte Höhe */
    background: linear-gradient(to right, var(--light-aqua), var(--dark-navy));
    /* Hintergrund-Gradient färbt den gesamten Balken ein */
}

.logo-container {
    display: flex;
    flex-direction: column; /* Stapelt Logo und Untertitel vertikal */
    align-items: center;
    padding: 20px 0;
    text-align: center;
    background-color: #ffffff; /* Weißer Hintergrund für den Bereich unter dem Gradienten */
}

.logo-container h1 {
    font-size: 2.5em;
    color: var(--primary-blue);
    margin-bottom: 5px;
}

.subtitle {
    color: #666;
    font-weight: 400;
    font-size: 1.1em;
}


/* ============================== */
/* MAIN CONTENT LAYOUT & TEXT */
/* ============================== */

.container {
    max-width: 900px;
    margin: 0px auto; /* Zentriert den Hauptinhalt */
    padding: 30px 20px;
	background-color:rgba(255,255,255,0.39);
}

section h2 {
    font-size: 2em;
    color: var(--primary-blue);
    margin-bottom: 15px;
    border-left: 4px solid #ffd633; /* Akzentuierung */
    padding-left: 10px;
}

.introduction-text p {
    font-size: 1.1em;
    margin-bottom: 20px;
    text-align: justify;
}

/* ============================== */
/* CTA BUTTON STYLING */
/* ============================== */

.pricing-cta {
    text-align: center;
    padding: 40px 20px;
    background-color: #e8f7ff; /* Leicht blauer Hintergrund für den Bereich */
    border-radius: 10px;
    margin-top: 30px;
}

.price-info {
    margin-bottom: 30px;
    font-size: 1.1em;
    color: #555;
}

.cta-button {
    display: inline-block;
    background-color: var(--primary-blue);
    color: white;
    padding: 12px 30px;
    text-decoration: none; /* Entfernt die Unterstreichung vom Link */
    border-radius: 50px; /* Macht den Button abgerundet */
    font-size: 1.2em;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
}

.cta-button:hover {
    background-color: #0a477c; /* Etwas dunkler bei Hover */
    transform: translateY(-2px); /* Kleiner "Spring"-Effekt */
    cursor: pointer;
}


/* ============================== */
/* FOOTER STYLING */
/* ============================== */

footer {
    background-color: #333; /* Dunkelgrau/Schwarz für den Footer */
    color: #ccc;
    text-align: center;
    padding: 40px 20px;
    margin-top: 50px;
}

footer h3 {
    color: white;
    margin-bottom: 15px;
}

address {
    font-style: normal; /* Stellt sicher, dass die Adresse nicht kursiv ist */
    line-height: 2.2;
    max-width: 400px;
    margin: 0 auto; /* Zentriert den Adressblock */
}

address a {
    color: #89CFF0; /* Akzentfarbe für Links im Footer */
    text-decoration: none;
}

/* ============================== */
/* RESPONSIVITÄT (Für Mobilgeräte) */
/* ============================== */
@media (max-width: 768px) {
    .logo-container h1 {
        font-size: 2em;
    }
    section h2 {
        font-size: 1.8em;
    }
    .cta-button {
        display: block; /* Der Button wird untereinander besser */
        width: 90%;
        margin: 0 auto;
    }
}
/* ============================== */
/* GALLERY STYLING */
/* ============================== */

.gallery-section {
    margin: 50px auto;
    padding: 20px 0;
}

.gallery-section h2 {
    text-align: center;
    margin-bottom: 30px;
}

.gallery {
    /* Definiert das Grid-Layout für die Bilder */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Passt sich automatisch an 8 Posterrahmen an */
    gap: 15px; /* Abstand zwischen den Bildern */
    padding: 0 10px;
}

.gallery img {
    width: 100%;
    height: 200px; /* Einheitliche Höhe für die Thumbnails */
    object-fit: cover; /* Stellt sicher, dass das Bild den Rahmen füllt, ohne verzerrt zu werden */
    cursor: pointer; /* Zeigt an, dass es klickbar ist */
    transition: transform 0.3s ease, opacity 0.3s ease;
    border-radius: 8px; /* Etwas abgerundete Ecken */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Leichter Schatteneffekt */
}

/* Effekt beim Überfahren (Hover) */
.gallery img:hover {
    transform: scale(1.03); /* Leicht vergrößern */
    opacity: 0.9;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}


/* ============================== */
/* RESPONSIVITÄT FÜR GALLERY (Verbesserung) */
/* ============================== */

@media (max-width: 600px) {
    .gallery img {
        height: 180px; /* Reduziert die Höhe auf kleinen Screens */
    }
}