/* --- Frühlingsfarben & Basis-Setup --- */

:root {

    --bg-color: #faf9f6; /* Helles, warmes Off-White */

    --text-color: #333333; /* Dunkelgrau für gute Lesbarkeit */

    --accent-green: #e2efda; /* Zartes Frühlingsgrün / Pistazie */

    --accent-purple: #f3e9f4; /* Sanftes Frühlingsflieder */

    --primary-color: #7fa99b; /* Etwas kräftigeres Salbeigrün für Buttons/Akzente */

    --white: #ffffff;

}

 

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

 

/* Für alle normalen Texte */

body {

    font-family: 'Inter', sans-serif;

    font-weight: 300; /* Etwas dünner wirkt sofort moderner */

    line-height: 1.7; /* Mehr Zeilenabstand für bessere Lesbarkeit */

    color: #444;

    background-color: var(--bg-color);

}



/* Für alle großen Überschriften */

h1, h2, h3 {

    font-family: 'Cormorant Garamond', serif;

    font-weight: 600;

    letter-spacing: 0.5px; /* Minimaler Abstand zwischen den Buchstaben */

    color: #222;

}

 

/* --- Header & Nav (Optimiert für Verschwinden via JS) --- */

header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px 5%;

    background-color: var(--white);

    box-shadow: 0 2px 10px rgba(0,0,0,0.03);

    

    /* Geändert von sticky auf fixed für die JS-Interaktion */

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1000;

    

    /* Weiche Animation für das Ein- und Ausblenden */

    transition: transform 0.3s ease-in-out;

}



/* JS-Klasse zum Verstecken des Headers beim Scrollen nach unten */

.header-hidden {

    transform: translateY(-100%);

}

 

.lang-selector select {

    padding: 5px 10px;

    border: 1px solid #ddd;

    border-radius: 4px;

    background-color: var(--white);

    cursor: pointer;

    font-size: 0.9rem;

}

 

/* --- Hero Section (Ausgleich für den fixierten Header) --- */

.hero {

    background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-purple) 100%);

    padding: 120px 5%; /* Erhöhter Abstand für Premium-Look */

    text-align: center;

    display: flex;

    justify-content: center;

    align-items: center;

    

    /* Fängt die Höhe des fixierten Headers ab, damit kein Inhalt verdeckt wird */

    margin-top: 160px; 

}

 

.hero-content {

    max-width: 700px;

}

 

.hero h2 {

    font-size: 2.8rem;

    margin-bottom: 25px;

}

 

.hero p {

    font-size: 1.2rem;

    margin-bottom: 35px;

    color: #555;

}

 

/* --- Buttons --- */

.btn {

    display: inline-block;

    padding: 12px 30px;

    background-color: var(--primary-color);

    color: var(--white);

    text-decoration: none;

    border-radius: 25px;

    transition: all 0.3s ease;

    font-weight: 500;

}



.btn:hover {

    background-color: #699486;

    transform: translateY(-2px);

    box-shadow: 0 4px 15px rgba(0,0,0,0.1);

}



/* Neuer Button für den Ablauf */

.btn-secondary, .btn-third {

    background-color: var(--primary-color);

    color: var(--white);

    border: none;

}



.btn-secondary:hover, .btn-third:hover {

    background-color: #699486;

    transform: translateY(-2px);

    box-shadow: 0 4px 15px rgba(0,0,0,0.1);

}

 

/* --- Galerie (Responsive Grid & Optimierter Weißraum) --- */

.gallery-section {

    padding: 100px 5%; /* Mehr Platz zum Atmen */

    text-align: center;

}

 

.gallery-section h3 {

    font-size: 2.5rem;

    margin-bottom: 60px; /* Deutlicher Abstand vor den Werken */

}

 

.gallery-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr); 

    gap: 35px;

}

 

.gallery-item {

    background-color: var(--white);

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 4px 15px rgba(0,0,0,0.02);

    transition: transform 0.3s ease;

}

 

.gallery-item:hover {

    transform: translateY(-5px);

}

 

.gallery-item img {

    width: 100%;

    height: 350px;

    object-fit: contain; 

    background-color: #ffffff; 

    display: block;

    cursor: pointer;

    transition: transform 0.2s ease;

}



.gallery-item img:hover {

    transform: scale(1.02);

}

 

.item-info {

    padding: 25px 20px; /* Mehr Luft im Beschreibungskasten */

    font-size: 1rem;

    background-color: var(--white);

    border-top: 1px solid #f0f0f0;

}



/* --- Großansicht-Fenster (Modal) --- */

.modal {

    display: none; 

    position: fixed;

    z-index: 2000; /* Erhöht, damit das Modal über dem fixed Header liegt */

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.85); 

    justify-content: center;

    align-items: center;

}



.modal-content {

    max-width: 90%;

    max-height: 85%;

    border-radius: 4px;

    box-shadow: 0 4px 20px rgba(0,0,0,0.5);

}



.modal-close {

    position: absolute;

    top: 20px;

    right: 35px;

    color: #fff;

    font-size: 40px;

    font-weight: bold;

    cursor: pointer;

    transition: 0.2s;

}



.modal-close:hover {

    color: var(--primary-color); 

}

 

/* --- Ablauf der Bestellung Sektion (Optimierter Weißraum) --- */

.order-process {

    padding: 100px 20px; /* Erhöhter Sektions-Abstand */

    background-color: #fafafa; 

    text-align: center;

}



.order-process h2 {

    margin-bottom: 50px;

    font-size: 2.2rem;

    color: #333;

}



.process-steps {

    display: flex;

    justify-content: center;

    gap: 35px;

    max-width: 1100px;

    margin: 0 auto;

    flex-wrap: wrap; 

}



.step-card {

    background: #ffffff;

    padding: 40px 30px;

    border-radius: 8px;

    box-shadow: 0 4px 15px rgba(0,0,0,0.03);

    flex: 1;

    min-width: 260px; 

    max-width: 320px;

    position: relative;

    border-top: 3px solid var(--primary-color);

    box-sizing: border-box; 

}



.step-icon {

    font-size: 2.5rem;

    color: var(--primary-color);

    margin-bottom: 15px;

}



.step-number {

    position: absolute;

    top: 15px;

    right: 20px;

    font-size: 1.2rem;

    font-weight: bold;

    color: #ddd;

}



.step-card h3 {

    font-size: 1.35rem;

    margin-bottom: 12px;

    color: #222;

}



.step-card p {

    font-size: 0.95rem;

    color: #666;

    line-height: 1.6;

}

 

/* --- Kontakt Section (Optimierter Weißraum) --- */

.contact-section {

    background: linear-gradient(135deg, var(--white) 0%, var(--accent-purple) 100%);

    padding: 100px 5%;

    text-align: center;

}



.contact-section h3 {

    font-size: 2.5rem;

    margin-bottom: 20px;

    color: var(--text-color);

}



.contact-section p {

    margin-bottom: 50px;

    max-width: 600px;

    margin-left: auto;

    margin-right: auto;

    color: #666;

}



.contact-form {

    max-width: 550px;

    margin: 0 auto;

    background-color: var(--white);

    padding: 45px;

    border-radius: 16px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);

    text-align: left; 

}



.form-group {

    margin-bottom: 24px;

}



.form-group label {

    display: block;

    margin-bottom: 8px;

    font-size: 0.9rem;

    font-weight: 500;

    color: #555;

}



.form-control {

    width: 100%;

    padding: 14px 16px;

    font-size: 1rem;

    background-color: var(--bg-color);

    border: 1px solid rgba(0, 0, 0, 0.05);

    border-radius: 8px;

    color: var(--text-color);

    outline: none;

    transition: all 0.3s ease;

}



.form-control:focus {

    background-color: var(--white);

    border-color: var(--primary-color);

    box-shadow: 0 0 0 4px rgba(127, 169, 155, 0.15); 

}



textarea.form-control {

    resize: vertical;

    min-height: 120px;

    font-family: inherit;

}



.contact-form .btn-submit {

    width: 100%;

    padding: 14px;

    background-color: var(--primary-color);

    color: var(--white);

    border: none;

    border-radius: 8px;

    font-size: 1rem;

    font-weight: 500;

    cursor: pointer;

    transition: transform 0.2s ease, background-color 0.3s ease, box-shadow 0.3s ease;

}



.contact-form .btn-submit:hover {

    background-color: #699486;

    box-shadow: 0 5px 15px rgba(127, 169, 155, 0.3);

}



.contact-form .btn-submit:active {

    transform: scale(0.98);

}



/* --- "Back to Top" Button Styling (Optimiert) --- */

#back-to-top {

    position: fixed;

    bottom: 25px;

    right: 25px;

    background-color: var(--primary-color);

    color: white;

    border: none;

    width: 50px; 

    height: 50px;

    border-radius: 50%;

    cursor: pointer;

    display: none; /* Über JS gesteuert */

    z-index: 1500; /* Sichergestellt, dass er über Sektionen, aber unter Modals bleibt */

    transition: background-color 0.3s ease, transform 0.2s ease, bottom 0.3s ease;

    box-shadow: 0 4px 15px rgba(0,0,0,0.15);

    font-size: 1.1rem;

    

    display: flex;

    align-items: center;

    justify-content: center;

}



#back-to-top:hover {

    background-color: #699486;

    transform: scale(1.05);

}



/* --- Medienabfrage für Smartphones --- */

@media (max-width: 600px) {

    #back-to-top {

        bottom: 15px; 

        right: 15px;

        width: 45px;  

        height: 45px;

        font-size: 1rem;

    }

    .hero {

        margin-top: 180px; /* Leicht erhöht für kleinere Mobil-Header */

    }

}

 

/* --- Footer --- */

.social-links a {

    color: var(--primary-color); 

    font-size: 2.2rem; 

    text-decoration: none;

    transition: all 0.3s ease;

    display: inline-block;

}



footer {

    background-color: var(--white);

    text-align: center;

    padding: 40px 20px;

    font-size: 0.9rem;

    color: #777;

    border-top: 1px solid #eee;

}

 

/* --- Medienabfragen für responsive Ansichten (Tablets & Handys) --- */

@media (max-width: 900px) {

    .gallery-grid {

        grid-template-columns: repeat(2, 1fr); 

        gap: 25px;

    }

}



@media (max-width: 850px) {

    .process-steps {

        gap: 20px;

    }

    .step-card {

        max-width: 100%; 

        flex: 1 1 calc(50% - 20px); 

    }

}



@media (max-width: 768px) {

    .hero {

        padding: 80px 20px;

    }

    .hero h2 {

        font-size: 2rem;

    }

    .hero p {

        font-size: 1.1rem;

    }

    .gallery-section {

        padding: 60px 20px;

    }

    .gallery-section h3 {

        font-size: 2rem;

        margin-bottom: 40px;

    }

    .contact-section {

        padding: 60px 20px;

    }

    .contact-section h3 {

        font-size: 2rem;

    }

}



@media (max-width: 580px) {

    .order-process {

        padding: 60px 15px;

    }

    .order-process h2 {

        font-size: 1.8rem;

    }

    .step-card {

        flex: 1 1 100%; 

    }

}



@media (max-width: 600px) {

    .gallery-grid {

        grid-template-columns: 1fr; 

    }

}



@media (max-width: 480px) {

    .contact-form {

        padding: 30px 20px;

    }

}



/* --- Styling für Impressum & Datenschutz im Footer --- */

.legal-links {

    margin: 15px 0;

    display: flex;

    justify-content: center;

    gap: 20px;

}



.legal-links a {

    color: var(--primary-color); /* Nutzt Ihr salbeigrün */

    font-size: 0.9rem;

    text-decoration: none;

    font-weight: 500;

    transition: color 0.3s ease;

}



.legal-links a:hover {

    color: #699486; /* Wird beim Drüberfahren etwas dunkler, genau wie Ihre Buttons */

    text-decoration: underline; /* Zeigt dem Nutzer, dass es ein Link ist */

}



/* --- Styles für Impressum & Datenschutz --- */

.legal-content-section {

    padding: 160px 5% 80px 5%;

    max-width: 800px;

    margin: 0 auto;

}

.legal-content-section h1 {

    font-size: 3rem;

    margin-bottom: 30px;

    text-align: center;

}

.legal-content-section h2 {

    font-size: 1.8rem;

    margin-top: 40px;

    margin-bottom: 15px;

    border-bottom: 1px solid var(--accent-green);

    padding-bottom: 5px;

}

.legal-content-section h3 {

    font-size: 1.3rem;

    margin-top: 20px;

    margin-bottom: 10px;

    color: var(--primary-color);

}

.legal-content-section p {

    margin-bottom: 15px;

    color: #444;

    line-height: 1.8;

}

.address-box {

    background: #fff; 

    padding: 25px; 

    border-radius: 8px; 

    box-shadow: 0 4px 15px rgba(0,0,0,0.02);

    margin-bottom: 30px;

}

.btn-back {

    display: inline-block;

    margin-top: 40px;

    color: var(--primary-color);

    text-decoration: none;

    font-weight: 500;

}

.btn-back:hover {

    color: #699486;

    text-decoration: underline;

}