/* ---------------------------------- */
/* Grundlayout */
/* ---------------------------------- */

body{
font-family:sans-serif;
margin:0;
background:#ffffff;
}

.site-wrapper{
max-width:940px;
margin:auto;
background:#fefef4;
border:1px solid #bbbbbb;
padding:20px;
margin-top:20px;
}

/* ---------------------------------- */
/* Header / Hero-Slideshow */
/* ---------------------------------- */

.hero-slideshow{
position:relative;
width:100%;
height:480px;
overflow:hidden;
background:#c8d8c0;
}

.hero-slide{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
opacity:0;
animation:heroFade 25s infinite;
}

.hero-slide:nth-child(1){ animation-delay:0s; }
.hero-slide:nth-child(2){ animation-delay:5s; }
.hero-slide:nth-child(3){ animation-delay:10s; }
.hero-slide:nth-child(4){ animation-delay:15s; }
.hero-slide:nth-child(5){ animation-delay:20s; }

@keyframes heroFade{
0%   { opacity:0; }
4%   { opacity:1; }
20%  { opacity:1; }
24%  { opacity:0; }
100% { opacity:0; }
}

.site-title{
font-family:serif;
font-size:30pt;
font-style:italic;
text-align:left;
}

.site-subtitle{
font-family:serif;
font-size:14pt;
font-style:italic;
text-align:left;
}

/* ---------------------------------- */
/* Navigation */
/* ---------------------------------- */

.navigation{
margin-top:10px;
display:flex;
flex-wrap:wrap;
gap:20px;
}

.navigation a{
font-family:sans-serif;
font-size:10pt;
color:black;
text-decoration:none;
}

.navigation a:hover{
text-decoration:underline;
}

.nav-active{
font-weight:bold;
border-bottom:2px solid #5a2500;
padding-bottom:2px;
}

/* ---------------------------------- */
/* Hamburger Menü */
/* ---------------------------------- */

.nav-toggle{
display:none;
font-family:sans-serif;
font-size:12pt;
cursor:pointer;
margin-top:10px;
}

/* ---------------------------------- */
/* Content */
/* ---------------------------------- */

.page-container{
margin-top:20px;
}

.page-title{
font-family:sans-serif;
font-weight:normal;
font-size:25px;
line-height:35px;
color:rgb(89,37,0);
margin-top:20px;
}

.content-text{
font-family:sans-serif;
font-size:10pt;
line-height:1.5;
margin-bottom:12px;
}

/* ---------------------------------- */
/* Feature Layout */
/* ---------------------------------- */

.features{
display:flex;
gap:30px;
align-items:flex-start;
}

.features-text{
flex:2;
font-size:10pt;
line-height:1.5;
}

.features-image{
flex:1;
}

.features-image img{
width:100%;
height:auto;
}

/* ---------------------------------- */
/* Kalender */
/* ---------------------------------- */

.calendar-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
margin-top:20px;
}

.calendar-month{
font-size:10pt;
}

.month-table{
width:100%;
border-collapse:collapse;
text-align:center;
}

.month-table th{
background:#eae8d4;
padding:4px;
border-bottom:1px solid #999;
}

.month-table td{
width:14%;
padding:3px;
border:1px solid #ddd;
}

.empty{
background:transparent;
border:none;
}

.frei{
background:#b2e8c8;
}

.frei.weekend{
background:#b2e8c8;
}

.belegt{
background:#e8a8a8;
color:#5a0000;
}

.ankunft{
background:#f2ef9e;
}

.abfahrt{
background:#edd4d4;
}

.ferien-star{
color:#070707;
font-weight:bold;
margin-left:1px;
}

.ferien-code{
font-size:0.6em;
vertical-align:super;
font-weight:bold;
}

.month-table td[title]{
cursor:help;
}

/* Legende */

.calendar-legend{
margin-top:20px;
font-size:10pt;
}

.legend-row{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:6px;
margin-bottom:6px;
}

.legend-label{
font-size:9pt;
color:#555;
min-width:130px;
}

.calendar-legend .legend-row > span{
padding:3px 8px;
border-radius:3px;
}

.legend-frei,
.legend-belegt,
.legend-ankunft,
.legend-abfahrt{
display:inline-block;
text-align:center;
min-width:62px;
}

.legend-frei{
background:#b2e8c8;
border:1px solid #ccc;
}

.legend-belegt{
background:#e8a8a8;
color:#5a0000;
}

.legend-ankunft{
background:#f2ef9e;
}

.legend-abfahrt{
background:#edd4d4;
}

.legend-ferientag{
background:transparent;
}

.calendar-hinweis{
margin-top:12px;
font-size:9pt;
color:#666;
font-style:italic;
}

.calendar-update{
margin-top:15px;
font-size:9pt;
color:#333;
}

/* ---------------------------------- */
/* Formular */
/* ---------------------------------- */

.contact-form{
max-width:560px;
}

.form-group{
display:flex;
flex-direction:column;
margin-bottom:18px;
}

.form-group label{
font-size:8.5pt;
font-weight:bold;
color:#555;
margin-bottom:5px;
letter-spacing:0.04em;
text-transform:uppercase;
}

.required{
color:#c40000;
}

.form-input{
width:100%;
padding:10px 13px;
font-size:10.5pt;
font-family:sans-serif;
border:1px solid #ccc;
border-radius:5px;
background:#fff;
box-sizing:border-box;
transition:border-color 0.15s, box-shadow 0.15s;
}

.form-input:focus{
outline:none;
border-color:#5a2500;
box-shadow:0 0 0 3px rgba(90,37,0,0.1);
}

textarea.form-input{
resize:vertical;
}

.form-row{
display:flex;
gap:20px;
}

.form-row .form-group{
flex:1;
}

.form-required-note{
font-size:8.5pt;
color:#777;
margin-bottom:12px;
}

.btn-submit{
background:#5a2500;
color:#fff;
border:none;
padding:11px 30px;
font-size:10.5pt;
font-family:sans-serif;
border-radius:5px;
cursor:pointer;
margin-top:4px;
transition:background 0.15s;
}

.btn-submit:hover{
background:#7a3500;
}

/* Fehlermarkierung */

.input-error{
border-color:#c40000;
background:#fff8f8;
}

.input-error:focus{
border-color:#c40000;
box-shadow:0 0 0 3px rgba(196,0,0,0.1);
}

.form-error-box{
background:#fff0f0;
border:1px solid #e8a0a0;
border-radius:5px;
color:#c40000;
padding:10px 14px;
margin-bottom:16px;
font-size:10pt;
}

.form-error{
color:#c40000;
font-weight:bold;
margin-bottom:10px;
}

/* Honeypot */

.honeypot{
position:absolute;
left:-9999px;
}

/* ---------------------------------- */
/* Layoutblöcke */
/* ---------------------------------- */

.content-two-column{
display:flex;
gap:30px;
align-items:flex-start;
}

.content-media{
flex:1;
}

.map-wrapper iframe{
width:100%;
height:300px;
}

.map-link{
font-size:8.5pt;
color:#666;
margin-top:4px;
}

.umgebung-content h2{
font-family:sans-serif;
font-size:14pt;
font-weight:normal;
color:rgb(89,37,0);
margin-top:20px;
margin-bottom:6px;
}

.umgebung-content p,
.umgebung-content li{
font-family:sans-serif;
font-size:10pt;
line-height:1.6;
}

.umgebung-content ul{
padding-left:20px;
margin-bottom:12px;
}

.floorplan-block img{
max-width:100%;
height:auto;
}

.image-caption{
font-family:serif;
font-size:10pt;
margin-top:6px;
}

.history-list{
font-size:10pt;
line-height:1.5;
padding-left:20px;
}

/* ---------------------------------- */
/* Responsive */
/* ---------------------------------- */

@media (max-width:900px){

.calendar-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media (max-width:700px){

.site-wrapper{
margin:0;
border:none;
padding:15px;
}

.nav-toggle{
display:block;
}

.navigation{
display:none;
flex-direction:column;
gap:10px;
margin-top:10px;
}

.nav-open{
display:flex;
}

.features{
flex-direction:column;
}

.content-two-column{
flex-direction:column;
}

}

@media (max-width:600px){

.calendar-grid{
grid-template-columns:1fr;
}

}
/* Standardtexte (für ältere Seiten ohne Klassen) */

h1{
font-family:sans-serif;
font-weight:normal;
font-size:25px;
line-height:35px;
color:rgb(89,37,0);
margin-top:20px;
}

p{
font-family:sans-serif;
font-size:10pt;
line-height:1.5;
margin-bottom:12px;
}
.form-input{
width:100%;
max-width:560px;
padding:4px;
font-size:10pt;
border:1px solid #888;
}
/* ---------------------------------- */
/* Fotos / Galerie */
/* ---------------------------------- */

.photo-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
margin-top:20px;
}

.photo-item{
border:1px solid #ccc;
padding:6px;
background:#fff;
}

.photo-item img{
width:100%;
height:220px;
object-fit:cover;
display:block;
}

/* leichtes Einblenden */

.photo-item{
opacity:0;
transform:translateY(20px);
animation:fadeInUp 0.6s ease forwards;
}

.photo-item:nth-child(odd){
animation-delay:0.1s;
}

.photo-item:nth-child(even){
animation-delay:0.2s;
}

@keyframes fadeInUp{
to{
opacity:1;
transform:translateY(0);
}
}

.content-text{
    flex:2;
    min-width:0;
}

.content-media{
    flex:1;
    min-width:300px;
}

/* ---------------------------------- */
/* Preisschätzung Kontaktformular */
/* ---------------------------------- */

.price-box{
background:#f0f4e8;
border:1px solid #b0c080;
border-radius:5px;
padding:10px 14px;
margin:8px 0 16px 0;
font-size:10pt;
max-width:560px;
}

.price-box-label{
color:#555;
margin-bottom:4px;
}

.price-row{
color:#333;
}

.price-total{
font-weight:bold;
margin-top:6px;
color:#5a2500;
font-size:11pt;
}

/* ---------------------------------- */
/* FAQ */
/* ---------------------------------- */

.faq-heading{
margin-top:32px;
}

.faq{
max-width:560px;
margin-top:10px;
}

.faq-item{
border-bottom:1px solid #ddd;
padding:6px 0;
}

.faq-item:first-child{
border-top:1px solid #ddd;
}

.faq-question{
cursor:pointer;
font-family:sans-serif;
font-size:10pt;
font-weight:bold;
list-style:none;
padding:4px 0;
}

.faq-question::-webkit-details-marker{ display:none; }

.faq-question::before{
content:'▶\00a0';
font-size:0.75em;
color:#5a2500;
}

details[open] .faq-question::before{
content:'▼\00a0';
}

.faq-answer{
font-family:sans-serif;
font-size:10pt;
line-height:1.6;
padding:6px 0 8px 16px;
color:#333;
}