:root {
    --primary: #5DBB63;
    --secondary: #FFB347;
    --text: #333;
    --text-light: #555;
    --light-bg: #F7F9F7;
    --white: #ffffff;
    --dark-grey: #333;
}

/* Basis-Reset mit Fokus auf Mobile Ränder */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    font-family: 'Quicksand', sans-serif;
    color: var(--text);
    line-height: 1.6;
    background: var(--white);
    overflow-x: hidden;
}

/* --- GLOBALE STRUKTUR (Fix für klebende Texte) --- */
.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding-left: 25px !important;
    padding-right: 25px !important;
}

.section {
    padding: 60px 0;
    text-align: center;
    width: 100%;
}

h2 {
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: 30px;
}

h3,
h4,
h5 {
    color: var(--dark-grey);
    margin-bottom: 12px;
    line-height: 1.3;
}

.bg-light {
    background-color: var(--light-bg);
}

/* --- FLIESSTEXT & TYPOGRAPHIE --- */
p {
    margin-bottom: 15px;
}

.content-text {
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
    padding: 0 10px;
}

.main-intro {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--text-light);
}

/* --- HEADER & LOGO --- */
header {
    background: var(--white);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 15px 0;
    transition: all 0.4s ease;
}

header.header-small {
    padding: 8px 0;
}

.navbar {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
    position: relative;
}

.logo-img {
    height: 65px;
    width: auto;
    transition: all 0.4s ease;
}

header.header-small .logo-img {
    height: 45px;
}

.menu-toggle {
    position: absolute;
    right: 20px;
    top: 15px;
    background: none;
    border: none;
    z-index: 1500;
}

.hamburger {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--text);
    position: relative;
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 3px;
    background: var(--text);
    left: 0;
}

.hamburger::before {
    top: -8px;
}

.hamburger::after {
    bottom: -8px;
}

.nav-overlay {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background: var(--white);
    z-index: 2000;
    transition: 0.4s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.nav-overlay.active {
    right: 0;
}

.menu-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 3rem;
    color: var(--primary);
    background: none;
    border: none;
}

.nav-links {
    list-style: none;
    text-align: center;
}

.nav-links li {
    margin: 20px 0;
}

.nav-links a {
    text-decoration: none;
    font-size: 1.5rem;
    color: var(--text);
    font-weight: 700;
}

/* --- KONZEPT CARDS --- */
.konzept-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 40px;
}

.card {
    background: var(--white);
    padding: 40px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card h3 {
    margin-bottom: 15px;
}

/* Spezifischer Abstand in Cards */
.card p {
    margin-bottom: 0;
}

.divider {
    width: 40px;
    height: 3px;
    background-color: var(--primary);
    margin-bottom: 20px;
    border-radius: 2px;
}

.centered-footer-box {
    margin: 0 auto;
    background: var(--white);
    padding: 40px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* --- TEAM (Mobile Fix) --- */
.team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 30px;
    width: 100%;
}

.team-member {
    text-align: center;
}

.team-img {
    width: 100%;
    max-width: 200px;
    /* Mindestens doppelte Größe (vorher 85px) */
    aspect-ratio: 1/1;
    border-radius: 20px;
    /* So wie alle anderen Bilder auch */
    object-fit: cover;
    margin: 0 auto 15px;
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.team-member h3 {
    font-size: 0.95rem;
    margin-bottom: 5px;
}

.team-member p {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 0;
}

/* --- RESTLICHE ELEMENTE --- */
#hero {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('img/hero.jpg') center/cover no-repeat;
    height: 45vh;
    display: flex;
    align-items: center;
    color: white;
    text-align: center;
}

#hero h1 {
    font-size: 1.8rem;
    padding: 0 20px;
    width: 100%;
}

.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin-top: 20px;
}

.card-with-img {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* --- GALERIE SLIDER --- */
.slider-wrapper {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    border-radius: 20px;
    /* Abgerundete Ecken für den gesamten Slider */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Scrollbar verstecken */
.slider::-webkit-scrollbar {
    display: none;
}

.slider {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.slider img {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
    object-fit: cover;
    aspect-ratio: 16/9;
}

.slider-nav {
    display: flex;
    column-gap: 15px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.slider-nav a {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    transition: background-color 0.3s ease;
    margin: 0;
    /* Override generic a margin if any */
}

.slider-nav a:hover,
.slider-nav a:active {
    background-color: var(--white);
}

/* --- RÄUME BILDER --- */
.card-with-img img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 20px;
    /* Vollständig abgerundet (User-Wunsch) */
}

/* Falls die Card selbst abgerundet sein soll, ist das bereits der Fall (.card-with-img radius 15px).
   Der User wollte: "Alle Sliderbilder und die 3 Bilder darunter sollen abgerundet sein".
   Da die Cards Text enthalten, runden wir die Bilder oben ab oder die ganze Card passt sich an.
   Update: User wünscht Bilder NICHT abgeschnitten, also Radius überall.
*/

.card-with-img {
    background: white;
    border-radius: 20px;
    /* Update auf 20px für Konsistenz */
    /* Overflow hidden entfernen, falls das Bild "frei" wirken soll,
       oder behalten, aber Bild hat eigenen Radius.
       Wenn Radius Bild == Radius Card, sieht es gut aus.
    */
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* --- DESKTOP --- */
@media screen and (min-width: 800px) {
    /* ... (vorheriger Code bleibt erhalten, wird durch Tool-Logic gehandhabt wenn nicht ersetzt) ... */
    /* Moment, ich ersetze hier große Blöcke, ich muss aufpassen den Context zu behalten */
    /* Da das Tool replace_file_content Chunk-weise arbeitet, muss ich den Block unten nicht komplett neu schreiben, 
       wenn ich ihn nicht ändere. Der User-Request betraf auch Team-Bilder.
       Ich mache lieber zwei Chunks oder fasse clever zusammen.
       Hier fasse ich Räume und Team zusammen, da Team davor liegt im File.
       Warte, Team ist VOR Räume im CSS File? Nein, Team ist Zeile 243. Räume (Card with img) ist Zeile 368.
       Ah, im grep war Team bei 243. "card-with-img" ist weiter unten.
       Ok, ich mache besser zwei separate Aufrufe oder einen MultiReplace wenn möglich.
       Das Tool ist `replace_file_content` (singular chunk) oder `multi_replace`.
       Ich nehme `multi_replace` für Sauberkeit an zwei Stellen.
    */
}

/* --- DESKTOP --- */
@media screen and (min-width: 800px) {
    html {
        scroll-padding-top: 180px;
    }

    .container {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    header {
        padding: 25px 0;
    }

    header.header-small {
        padding: 10px 0;
    }

    .navbar {
        flex-direction: column;
        gap: 20px;
    }

    .logo-img {
        height: 120px;
    }

    header.header-small .logo-img {
        height: 60px;
    }

    .menu-toggle {
        display: none !important;
    }

    .nav-overlay {
        position: static;
        height: auto;
        width: auto;
        background: none;
        display: flex;
        flex-direction: row;
    }

    .nav-links {
        display: flex;
        gap: 30px;
    }

    .nav-links li {
        margin: 0;
    }

    .nav-links a {
        font-size: 1rem;
    }

    .konzept-grid,
    .grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .team-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    #hero h1 {
        font-size: 3.5rem;
    }

    .wald-layout {
        display: flex;
        align-items: center;
        gap: 40px;
        text-align: left;
    }

    .wald-text {
        padding: 0;
    }

    /* Remove padding on desktop if flex handles it well, or keep it depending on alignment */
    .wald-img {
        width: 45%;
        margin-bottom: 0;
    }

    .btn {
        width: auto;
    }
}

.wald-text {
    padding: 0 10px;
}

.info-card {
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.contact-box {
    background: white;
    padding: 30px 20px;
    border-radius: 15px;
    width: 100%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.btn {
    display: inline-block;
    background: var(--primary);
    color: white !important;
    padding: 14px 28px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    width: 100%;
    margin-top: 15px;
    text-align: center;
}

/* --- FOOTER --- */
footer {
    padding: 40px 20px;
    background: var(--dark-grey);
    color: white;
    text-align: center;
    font-size: 0.85rem;
    width: 100%;
}

footer a {
    color: var(--secondary);
    text-decoration: none;
    margin: 0 10px;
}

/* --- DESKTOP --- */
@media screen and (min-width: 800px) {
    html {
        scroll-padding-top: 180px;
    }

    .container {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    header {
        padding: 25px 0;
    }

    header.header-small {
        padding: 10px 0;
    }

    .navbar {
        flex-direction: column;
        gap: 20px;
    }

    .logo-img {
        height: 120px;
    }

    header.header-small .logo-img {
        height: 60px;
    }

    .menu-toggle {
        display: none !important;
    }

    .nav-overlay {
        position: static;
        height: auto;
        width: auto;
        background: none;
        display: flex;
        flex-direction: row;
    }

    .nav-links {
        display: flex;
        gap: 30px;
    }

    .nav-links li {
        margin: 0;
    }

    .nav-links a {
        font-size: 1rem;
    }

    .konzept-grid,
    .grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .team-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    #hero h1 {
        font-size: 3.5rem;
    }

    .wald-layout {
        display: flex;
        align-items: center;
        gap: 40px;
        text-align: left;
    }

    .wald-text {
        padding: 0;
    }

    /* Remove padding on desktop if flex handles it well, or keep it depending on alignment */
    .wald-img {
        width: 45%;
        margin-bottom: 0;
    }

    .btn {
        width: auto;
    }
}

.wald-text {
    padding: 0 10px;
}

/* Mobile Consistency */