/* Podere Sangiovanni
   Toscana Design
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Lato:wght@300;400;700&display=swap');

@font-face {
  font-family: 'Century Gothic';
  src: url('centurygothic.woff2') format('woff2'),
       url('centurygothic.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


:root {
    --olive: #6B7A46;
    --terracotta: #C66A4A;
    --sand: #D9C6A5;
    --cream: #F7F4EC;
    --dark: #3A3A3A;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    background: var(--cream);
    color: var(--dark);
    font-family: 'Century Gothic', sans-serif;
    line-height: 1.7;
}


h1, h2, h3 {
   font-family: 'Shadows Into Light', cursive;
    font-weight: normal;
    letter-spacing: -0.05em;

}


h2 {
    color: var(--olive);
    font-size: 2.0rem;
    margin-bottom: 10px;
}


p {
    font-size: 1.1rem;
}


/* Kopfbereich */

header {

    background: var(--cream);
    padding: 10px 8%;

    display: flex;
    justify-content: space-between;
    align-items: center;

}


.logo {
    text-align: center;
}


.logo span {
    font-size: 35px;
}


.logo h1 {

    color: var(--olive);
    font-size: 2.5rem;

}


.logo p {

    color: var(--terracotta);
    letter-spacing: 3px;

}



nav a {

    color: var(--dark);
    text-decoration: none;
    margin-left: 25px;
    font-weight: 300;

}


nav a:hover {

    color: var(--terracotta);

}



/* Titelbild */

.hero {

    min-height: 75vh;

    background:
    linear-gradient(
        rgba(0,0,0,0),
        rgba(0,0,0,0)
    ),
    url("/images/startbild.jpg");

    background-size: cover;
    background-position: center;

    display:flex;
    align-items:center;
    justify-content:center;

}


.hero-text {

    background: rgba(247,244,236,0.9);

    padding: 40px;
    max-width:600px;

    text-align:center;

}


.hero-text h2 {

    font-size:2rem;
}


.button {

    display:inline-block;

    margin-top:25px;

    background:var(--terracotta);
    color:white;

    padding:15px 35px;

    text-decoration:none;

    border-radius:30px;

}



/* Bereiche */


section {

    padding:30px 10%;
    text-align:center;

}



/* Ausstattung */


.features {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:30px;

    margin-top:40px;

}

#wohnung {

    background:#EFE7D8;

}

.features div {

    background:white;

    padding:30px;

    border-radius:10px;

    border-top:5px solid var(--olive);

}



/* Galerie */


.gallery {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:20px;

}


.gallery img {

    width:100%;
    height:280px;

    object-fit:cover;

    border-radius:12px;

    cursor:pointer;

    transition:0.3s;

}


.gallery img:hover {

    filter:brightness(0.9);

}





/* Kontakt */


form {

    max-width:500px;

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:15px;

}


input,
textarea {

    padding:15px;

    border:1px solid var(--sand);

    font-size:1rem;

    background:white;

}


textarea {

    height:150px;

}


button {

    background:var(--olive);

    color:white;

    border:none;

    padding:15px;

    font-size:1rem;

    cursor:pointer;

}


button:hover {

    background:var(--terracotta);

}

#kontakt {

    background:#EFE7D8;

}


/* Fußbereich */


footer {

    background:var(--olive);

    color:white;

    text-align:center;

    padding:30px;

}

footer a {

    color:white;

    text-decoration:none;

}


footer a:hover {

    color:var(--sand);

}


/* Handy */

@media(max-width:800px){

header {

    flex-direction:column;

    padding:25px 5%;

}


.logo img {

    width:220px;

}


nav {

    margin-top:20px;

    text-align:center;

}


nav a {

    display:inline-block;

    margin:8px;

    font-size:0.95rem;

}


.languages {

    display:block;

    margin:15px 0 0;

    padding:0;

    border:none;

}


.hero {

    min-height:70vh;

}


.hero-text {

    margin:20px;

    padding:25px;

}


.hero-text h2 {

    font-size:2rem;

}


section {

    padding:50px 6%;

}


h2 {

    font-size:2.2rem;

}


.features {

    grid-template-columns:1fr;

}


.gallery {

    grid-template-columns:1fr;

}


.gallery img {

    height:240px;

}


.map iframe {

    height:350px;

}


}



.logo img {
    width: 260px;
    height: auto;
}
.languages {

    margin-left:25px;

    padding-left:20px;

    border-left:1px solid var(--sand);

}


.languages a {

    margin-left:10px;

    color:var(--terracotta);

}
.map {

    margin-top:40px;

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 10px 25px rgba(0,0,0,0.12);

}


.map iframe {

    display:block;

}
.booking-form {

    max-width:600px;

    margin:auto;

    text-align:left;

}


.booking-form label {

    color:var(--olive);

    font-weight:bold;

}


.booking-form select {

    padding:15px;

    border:1px solid var(--sand);

    background:white;

    font-size:1rem;

}
#preise {

    background:#EFE7D8;

}


#preise .features div {
    background:white;
    border-top:5px solid var(--terracotta);
}
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.gallery a {
    display: block;
    overflow: hidden;
    border-radius: 14px;
}

.gallery img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.gallery img:hover {
    transform: scale(1.05);
}