/*
Theme Name: Familie Quehenberger
Author: Sarah Mayr
Description: Design der Website der Familie Quehenberger.
Version: 1.0
*/

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/montserrat-regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Parisienne';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/parisienne-regular.ttf') format('truetype');
}

html, body {
    height: auto; /* Höhe 100% wegen Platz zwischen Header und Footer --> soll mit main Bereich gefüllt sein, damit footer ganz unten */
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: black;
}

body {
    display: flex;
    flex-direction: column; /* Stapelt Header, Main und Footer untereinander */
    min-height: 100vh;      /* Body ist mindestens so hoch wie der Bildschirm */
}

h1, h2, h3, h4 {
    font-family: 'Parisienne', cursive;
    font-weight: 400; 
    color: black;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

h1 { font-size: 60px; } 
h2 { font-size: 40px; } 
h3 { font-size: 28px; } 

.nav-list li a, .btn-header, .footer {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 15px;
    text-transform: none; /* Keine automatischen Großbuchstaben */
}



main {
    flex: 1; /* Footer wird von main nach unten gedrückt. Main soll sich den ganuen verfügbaren Platz nehmen */ 
    max-width: 1200px;    
    margin: 40px auto;
    padding: 0 40px;
    width: 100%;
    box-sizing: border-box;
}


/* HEADER */ 

.main-header {
    background: #ffffff;
    height: 90px;
    display: flex;
    align-items: center; /* vertikale Zentrierung */
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* 0 horizental; 4px vertikal nach unten;  15px Weichzeichnung; rgba() = Farbe schwarz mit 5 % Deckkraft */
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    max-width: 100%;
    box-sizing: border-box; /* Padding wird in die Höhe eingerechnet */

}

.header-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between; /* Logo links, header-right rechts */
    align-items: center;
}


.logo {
	width: 250px;
    height: 90px;
	overflow:hidden;
    display: flex;
	align-items:center;
}

.logo img{
	height: 250px;
	width: auto;
	object-fit: cover;
	object-position:center; /* uentriert den wichtigsten Teil */
    display: block;
}

/* Gruppierung der rechten Elemente */
.header-right {
    display: flex;
    align-items: center;
    gap: 20px; /* Abstand zwischen Buttons und Hamburger */
}

/* styling für die speziellen Landhaus-Buttons */
.landhaus-actions {
    display: flex;
    gap: 10px;
}

.btn-header{
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    background-color: white;
    border: 1px solid;
    transition: 0.3s;
}

.btn-back-icon {
    width: 28px;
    height: auto;
    transition: transform 0.3s ease, filter 0.3s ease;
    vertical-align: middle;
}

.btn-header:hover .btn-back-icon {
	opacity: 0.8;
}

.btn-back-landhaus .btn-back-icon{
	filter: brightness(0) saturate(100%) invert(11%) sepia(89%) saturate(3176%) hue-rotate(353deg) brightness(95%) contrast(87%);
}

.btn-header.btn-back-landhaus{
	border-color: #871715;
}

.btn-back-svh-maishofen .btn-back-icon {
	filter: brightness(0) saturate(100%) invert(11%) sepia(58%) saturate(2705%) hue-rotate(204deg) brightness(94%) contrast(107%);
}

.btn-header.btn-back-svh-maishofen {
    border-color: #001F54;
}

.btn-back-svh-stuhlfelden .btn-back-icon {
	filter: brightness(0) saturate(100%) invert(26%) sepia(58%) saturate(370%) hue-rotate(91deg) brightness(95%) contrast(87%);
}
.btn-header.btn-back-svh-stuhlfelden{
	 border-color: #2D5A3F;
}

.btn-anfrage,
.btn-bewertung {
    color: #871715;
    border-color: #871715;
}

.btn-anfrage:hover,
.btn-bewertung:hover {
    color: #c16f6e;
    border-color: #c16f6e;
}

.btn-kontakt-maishofen {
    color: #001F54;
    border-color: #001F54;
}

.btn-kontakt-maishofen:hover {
    color: #4a6f9e;
    border-color: #4a6f9e;
}

.btn-kontakt-stuhlfelden {
    color: #2D5A3F;
    border-color: #2D5A3F;
}

.btn-kontakt-stuhlfelden:hover {
    color: #5f7f68;
    border-color: #5f7f68;
}


.nav-menu {
    display: none; /* Erstmal versteckt, wird via JS und .is-active angezeigt */
    position: absolute;
    top: 80px;
    right: 40px;
    left: auto;
    width: 350px;
    background: #ffffff;
    padding: 5px 0;
    border-top: 1px solid #eee;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); 
    border-radius: 8px;
    z-index: 1000;
}

.nav-menu.is-active{
    display: block; /* Menü sichtbar bzw. unsichtbar */
}

.nav-menu ul {
    list-style: none !important; /* Aufzählungszeichen entfernen */
    padding: 0;
    margin: 0;
}

.nav-menu ul li {
    margin: 0;
    text-align: left;
	list-style-type: none !important;
}

/* Alle Menüpunkte standardmäßig */
.nav-menu ul li a {
    color: black !important;
    text-decoration: none !important;
    font-size: 18px;
    font-weight: 400;
    display: block;
	padding: 12px 25px; /* Große Klickfläche */
    transition: 0.3s;
}

/* Aktiver Menüpunkt */
.nav-menu ul li.current-menu-item a {
    color: black !important;
    font-weight: bold !important;
}

/* Hamburger Styles */
.menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 7px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}


.bar {
    width: 40px;
    height: 4px;
    background-color: black;
    transition: 0.3s;
}

/* Hover-Effekt (wenn man mit der Maus drüberfährt) */
.nav-menu ul li a:hover {
    color: #5E5D5D;
}



@media (max-width: 1024px) {
    h1 { font-size: 45px; }
    h2 { font-size: 32px; }
    
    main {
        padding: 0 20px;
        margin: 20px auto;
    }

    .logo {
        width: 180px;
    }

    .btn-header {
        padding: 8px 12px;
        font-size: 13px;
    }
}


@media (max-width: 768px) {

    html, body {
        overflow-x: hidden;
    }

    h1 { font-size: 38px; }
    h2 { font-size: 28px; }

    main {
        padding: 0 15px;
        margin: 15px auto;
    }

    .main-header {
        height: 70px;
    }
    
    .header-container {
        padding: 0 15px;
    }

    .logo {
        width: 140px;
        height: 70px;
    }

    .logo img {
        height: 140px;
    }

    /* Header Buttons (Back-Button & Actions) */
    .landhaus-actions, 
    .haus-actions {
        display: none; /* Normale Aktions-Buttons ausblenden für Hamburger */
    }

    /* Der Back-Button (Home-Icon) soll sichtbar bleiben, aber kleiner */
    .btn-header.btn-back-landhaus,
    .btn-header.btn-back-svh-maishofen,
    .btn-header.btn-back-svh-stuhlfelden {
        padding: 5px 10px;
    }

    .btn-back-icon {
        width: 22px;
    }

    /* Hamburger & Navigation */
    .bar {
        width: 30px;
        height: 3px;
    }

    .nav-menu {
        display: block; /* Muss block sein, damit transition funktioniert */
        position: fixed;
        top: 0;
        right: -100%; /* Startet außerhalb */
        width: 70%;
        height: 95%;
        background: white;
        transition: right 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        z-index: 1000;
        box-shadow: -5px 0 25px rgba(0,0,0,0.15);
        border-radius: 0;
    }

    .nav-menu.is-active {
		margin-top: 50px;
        right: 0;
    }

    .nav-menu ul li a {
        font-size: 15px;
        padding: 5px 30px;
        border-bottom: 1px solid #f5f5f5;
    }

}


/* FOOTER */

.main-footer{
    background-image: linear-gradient(rgba(198, 160, 54, 0.2), rgba(155, 132, 68, 0.5)), url('assets/img/holzhintergrund.jpg'); /* leichter gelb effekt über dem Bild, 2 rgba Werte damit der Farbverlauf oben und unten so ausschaut als wäre durchgehend die gleiche Farbe*/
    background-size: cover;
    background-position: center;
    padding: 60px 0;
    text-align: center;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-socials {
    margin-bottom: 30px;
	display: flex;
    justify-content: center;
    gap: 20px;
}

.footer-socials a {
    display: inline-block;
    transition: transform 0.3s ease;
}


.facebook-icon,
.instagram-icon{
    width: 50px;
    height: 50px;
    display: block;
}

.facebook-icon {
    filter: brightness(0) invert(1);
}

/* | Trennsymbol */
.footer-links a:not(:last-child)::after {
    content: "|";          
    margin-left: 15px;
    margin-right: -15px;    /* Verhindert, dass der Strich den Gap-Abstand verdoppelt */
    color: #ffffff;
    pointer-events: none;  /* Strich soll nicht anklickbar sein */
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.footer-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 25px;
    transition: opacity 0.3s;
	
	white-space: nowrap;    /* Verhindert den Umbruch innerhalb eines Links */
    word-break: keep-all;   /* Verhindert das Aufbrechen von Wörtern */
    hyphens: none;
}

.footer-links a:hover, .facebook-icon:hover, .instagram-icon:hover {
    opacity: 0.7;
}


/* Mobile Anpassung: Tablets */
@media (max-width: 1024px) {
    .footer-links a {
        font-size: 24px;
        gap: 20px;
    }
    
    .facebook-icon, .instagram-icon {
        width: 40px;
        height: 40px;
    }
}

/* Für Smartphones (max 768px) */
@media (max-width: 768px) {
    .main-footer {
        padding: 40px 0;
    }

    .footer-socials {
        gap: 15px;
        margin-bottom: 20px;
    }

    .facebook-icon, .instagram-icon {
        width: 35px;
        height: 35px;
    }

    .footer-links {
        flex-direction: row; /* Bleibt nebeneinander */
        flex-wrap: wrap;     /* Umbruch, falls Wort zu lang */
        gap: 15px;
    }

    .footer-links a {
        font-size: 18px;
    }

    .footer-links a:not(:last-child)::after {
        margin-left: 10px;
        margin-right: -10px;
    }
}



/* Startseite */

.startseite {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow-x: hidden; /* ? */
}


/* Hero Bereich */
.hero {
    position: relative;
    width: 100%;
    height: 90vh;
}

.hero-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.slide {
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out; /* Weicher Übergang */
    z-index: 1;
}

.slide.active {
    opacity: 1;
    z-index: 2;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Bild füllt den Bereich aus ohne verzerrt zu werden */
}

.slider-next, .slider-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none; /* Hintergrund entfernen */
    border: none; /* Rahmen entfernen */
    cursor: pointer;
    z-index: 20; /* Über den Slides und dem Text */
    padding: 20px; /* Größere Klickfläche */
    transition: all 0.3Fs ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Die Icons in den Buttons */
.slider-next .arrow-icon, 
.slider-prev .arrow-icon {
    width: 50px; /* Größe der Pfeile */
    height: auto;
    filter: brightness(0) invert(1) drop-shadow(2px 2px 4px rgba(0,0,0,0.3)); /* Filter damit Bild weiß */
    transition: transform 0.3s ease;
}

/* Positionierung */
.slider-next {
    right: 30px;
}

.slider-prev {
    left: 30px;
}

/* Hover-Effekte */
.slider-next:hover .arrow-icon {
    transform: translateX(10px); /* Pfeil schiebt sich leicht nach rechts */
}

.slider-prev:hover .arrow-icon {
    transform: translateX(-10px); /* Pfeil schiebt sich leicht nach links */
}

/* Damit man die Buttons auf sehr hellem Hintergrund besser sieht */
.slider-next:hover, .slider-prev:hover {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

/*
.hero-text {
    position: absolute;
    bottom: 140px;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.6); 
    padding: 0px 60px; 
    box-sizing: border-box; 
    color: black;
    text-align: right;
    z-index: 15;
}

.hero-text h1{
    font-size: 55px;
    margin: 5px;
}
*/

.welcome {
    text-align: center;
    padding: 20px 20px;
    max-width: 800px;
    margin: 0 auto;
}


/* Haus-Sektionen */

.haus-section-wrapper {
    max-width: 1400px; /* Begrenzt den Inhalt, damit er nicht wegläuft */
    margin: 0 auto 100px auto;
}

.haus-block {
    display: flex;
    align-items: center;
    position: relative;
    padding: 20px 0;
    max-width: 100%; /* damit nicht über den Rand */
}

.haus-reverse {
    flex-direction: row-reverse; /* Tauscht Bild und Text-Box */
}

/* Bild: Höherer Z-Index, um über der Box zu liegen */
.haus-img {
    flex: 0 0 35%; /* Bild Breite */
    max-width: 500px;
    z-index: 10;
    position: relative;
    line-height: 0; /* Verhindert kleine Abstände unter dem Bild */
}

.haus-img img {
    width: 100%;
    height: auto; /* Auto damit das bild nicht verzerrt/zugeschnitten wird */
    object-fit: contain; /* nicht mehr cover, damit das ganze bild sichtbar bleibt und es sich nicht zugeschnitten anpasst */ 
    display: block;
    box-shadow: 10px 10px 25px rgba(0,0,0,0.2);
}

/* Content Box: Niedrigerer Z-Index & Negativer Margin für Überlappung */
.haus-content {
    flex: 0 0 100%; /* Etwas breiter für die Überlappung */
    padding: 60px 20% 60px 20%; /* Mehr Padding links wegen dem Bild */
    color: white;
    margin-left: -15%; /* Überlappung auf das Bild */
    z-index: 5;
    position: relative;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box; /* damit padding die box nicht vergrößert */
}

.haus-reverse .haus-content {
    margin-left: 0;
    margin-right: -15%; /* Überlappung bei Bild rechts */
    padding: 60px 20% 60px 20%
}


.box-rot { background-color: #871715; }
.box-blau { background-color: #001F54; }
.box-gruen { background-color: #2D5A3F; }

.haus-content h3 {
    color: white;
    margin-top: 0;
    margin-bottom: 20px;
}

.haus-content p {
    font-size: 15px;
    line-height: 1.5;
    max-width: 930px; 
}

/* Kontaktdaten Reihe */
.haus-contact-row {
    display: flex;
   justify-content: center; /* Zentriert die beiden Blöcke horizontal */
    align-items: flex-start; /* Richtet sie obenbündig aus */
    gap: 80px; /* Erzeugt einen festen Abstand zwischen Adresse und Details */
    padding: 40px 20px 0 20px; /* Gleichmäßiges Padding für alle Seiten */
    font-size: 15px;
    color: #333;
    width: 100%; /* Nutzt die volle Breite für die Berechnung der Mitte */
    box-sizing: border-box;
}


.contact-icon {
    width: 18px;
    height: auto;
    margin-right: 10px;
    vertical-align: middle;
}

.contact-red-box .contact-icon,
.contact-blue-box .contact-icon,
.contact-green-box .contact-icon,
.haus-contact .contact-icon{
	    filter: brightness(0) invert(1);
}

.contact-details p {
    margin: 5px 0;
    display: flex;
    align-items: center;
}

.arrow-link {
    position: absolute;
    bottom: 50px;
    right: 20%; /* Fester Wert für alle Blöcke */
    z-index: 30;  /* Höher als alles andere in der Box */
    display: block;
    width: 40px;  /* Gib dem Link eine feste Größe */
    height: auto;
    transition: transform 0.3s ease;
}

.haus-reverse .arrow-link {
    right: 20%; /* Stelle sicher, dass er auch hier rechts bleibt */
    left: auto;  /* Verhindert Konflikte */
}

/* Filter damit icon weiß ist */
.arrow-icon {
    width: 100%;
    height: auto;
    filter: brightness(0) invert(1); 
}

.arrow-link:hover {
    transform: translateX(10px);
}



/* Mobile Optimierung */

@media (max-width: 1024px) {

	.hero { height: 60vh; }
    
    .slider-next .arrow-icon, 
    .slider-prev .arrow-icon { width: 35px; }

    /* Haus Sektionen: seitliche Überlappung aufgelöst */
    .haus-block, 
    .haus-reverse {
        flex-direction: column; /* Untereinander stapeln */
        align-items: center;
        margin-bottom: 60px;
        padding: 0 20px;
    }

    .haus-img {
        flex: 0 0 100%;
        max-width: 90%;
        margin: 0 auto;
        z-index: 11;
    }

    .haus-content {
        flex: 0 0 100%;
        width: 100%;
        max-width: 600px; 
        margin: -50px auto 0 auto; 
        padding: 60px 40px 100px 40px;
        text-align: center;
        min-height: auto;
        border-radius: 8px;
    }

    /* Icon-Link (Pfeil) Positionierung */
    .arrow-link, 
    .haus-reverse .arrow-link {
        position: relative; /* Nicht mehr absolut, damit er unter dem Text steht */
        right: auto;
        left: auto;
        margin: 30px auto 0 auto;
        bottom: 0;
        width: 50px;
    }
}


@media (max-width: 768px) {

	.hero { height: 50vh; }
    
    h1 { font-size: 40px; }
    h2 { font-size: 32px; }
    h3 { font-size: 26px; }
    
    .welcome { padding: 30px 20px; }

    /* Haus Blöcke für Handy */
    .haus-img {
        max-width: 100%;
    }

    .haus-content {
        width: 95%;
        padding: 50px 25px 80px 25px;
        margin-top: -30px;
    }

    .haus-content p {
        font-size: 13px;
        line-height: 1.6;
    }

    /* Kontaktdaten */
    .haus-contact-row {
        flex-direction: column;
        gap: 20px;
        padding: 30px 20px;
        align-items: center;
    }

    .contact-details p {
        justify-content: center;
    }
    
    .slider-next, .slider-prev {
        padding: 10px;
    }
    .slider-next { right: 10px; }
    .slider-prev { left: 10px; }
}


/* Landhaus */

.landhaus-page {
    max-width: 100%;
    margin: 0;
    padding: 0;
}


.hero-video {
	background-color: #ffffff;
    max-height: 90vh;
    position: relative;
    overflow: hidden;
	display: flex;
    align-items: center;
    justify-content: center;
}

.hero-video-element {
    /*position: absolute;
    top: 50%;
    left: 50%;*/
	opacity: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
	transition: opacity 0.8s ease-in-out;
    z-index: 2;
}

.hero-video-element.video-visible {
    opacity: 1;
}

#videoFallback {
    display: none; /* Standardmäßig komplett weg */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    z-index: 1;
}


.landhaus-title{
    text-align: center; /* Zentriert text nur innerhalb der 800px */
    max-width: 800px;
    margin: 0 auto; /* zentriert gesamte Box */
    padding: 60px 0 20px 0;
}

.landhaus-title h1{
    color: #871715;
    margin: 0;
}


.landhaus-intro-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 80px;
    padding: 50px 0 40px 0;
}

.gallery-item img {
    width: 100%;
    aspect-ratio: 4 / 3; /* Bilder bei Sklaierung immer gleiches Format */
    height: 250px;
    object-fit: cover;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.05); /* Vergrößert das Bild um 5% */
}

html {
    scroll-behavior: smooth;
}

.gallery-item h3 {
    font-family: 'Montserrat', sans-serif; /* Hier kein Cursive, sondern clean */
    font-size: 18px;
    margin-top: 10px;
    word-wrap: break-word; /* Bricht lange Wörter zur Not um */
    hyphens: auto; /* Erlaubt Silbentrennung */
}
 /* damit der Text wenn ich auf den Link also in der gallery auf das jeweilige bild klicke sich der text nicht verfärbt */
.gallery-item a {
    text-decoration: none;
    color: inherit;
    display: block;
}


/* Unterseiten */
.subpage-layout {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

.subpage-layout .hero{
    max-width: 70%;
	margin: 0px auto;
	height: 80vh;
	border-radius: 15px;
	overflow: hidden;
	object-fit: contain;
}

.subpage-layout .house-slider .hero{
	max-width: 70%;
	margin: 0px auto;
	height: 80vh;
	object-fit: contain;
}


.subpage-layout .compact-section {
    padding: 20px 0 20px 0;
    margin: 0 auto;
}


.subpage-layout .house-details {
    margin: 20px auto;
}

.subpage-layout .house-info-block {
    margin: 40px 0 40px 0;
    gap: 30px;
}

.landhaus-desc{
    text-align: center;
    max-width: 800px;
    margin: 0 auto; /* zentriert gesamte Box */
    padding: 50px 0 40px 0;
}

/* Slider-Sektionen (die roten/blauen Boxen auf anderen Seiten) hier neutralisieren */
.subpage-layout .house-slider {
    margin-top: 10px;
    padding: 50px 0; /* Verhindert riesige Lücken um die Slider herum */
}

.subpage-layout .contact-footer {
    margin-top: 80px; /* Hier steuerst du den Abstand zum Text darüber */
}

.single-image {
    width: 100%;
    padding: 30px 0;
    display: flex;
    justify-content: center;
}

.single-image img{
	border-radius: 15px;
    display: block;
}


/* Preisliste */

.subpage-layout .preisliste-content {
    max-width: 800px;
    margin: 10px auto;
    padding: 0px;
}

.subpage-layout .preisliste-content .wp-block-table,
.subpage-layout .preisliste-content table
{
    width: 100%;
    border-collapse: separate;
	border-radius: 12px;
	overflow: hidden;
    font-family: 'Montserrat', sans-serif;
}

.subpage-layout .preisliste-content table th {
    background-color: #8B1A1A !important;
    color: #ffffff;
    padding: 15px;
	text-align: center;
    font-size: 16px;
}

.subpage-layout .preisliste-content table td {
    padding: 15px;
	text-align: center;
}


/* Anfrage Unterseite */
.anfrage-hero{
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px 20px 20px;
}

.anfrage-image{
    max-width: 620px;
    margin: 0 auto 25px auto;
}

.anfrage-image img{
    width: 100%;
    display: block;
    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.anfrage-title{
    text-align: center;
    margin-top: 2px;
    margin-bottom: -5px;
}

.anfrage-title h1{
    margin: 0;
    font-family: 'Parisienne', cursive;
    font-weight: 400;
    font-size: 60px;
    color: #871715;
}

/* Jetzt Anfragen */
.jetzt-title{
    text-align: center;
    margin-top: -5px;
    margin-bottom: 15px;
}

.jetzt-title h1{
    margin: 0;
    font-family: 'Parisienne', cursive;
    font-weight: 400;
    font-size: 60px;
    color: #871715;
}

/* Bewertung Unterseite */
.bewertung-page{
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.bewertung-hero{
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px 20px 20px;
    text-align: center;
}

.bewertung-image{
    max-width: 650px;
    margin: 0 auto 20px auto;
    padding: 0;
}

.bewertung-image img{
    width: 100%;
    display: block;
    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.bewertung-title{
    max-width: 760px;
    margin: 30px auto 0px auto;
    text-align: center !important;
    padding: 0 20px;
}

.bewertung-title h1{
    margin: 0 0 14px 0 !important;
    font-family: 'Parisienne', cursive !important;
    font-size: 60px !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    color: #871715 !important;
    text-align: center !important;
}

/* Was unsere Gäste sagen */
.gaeste-title{
    max-width: 760px;
    margin: 10px auto -15px auto;
    text-align: center !important;
    padding: 0 20px;
}

.gaeste-title h1{
    margin: 0 0 14px 0 !important;
    font-family: 'Parisienne', cursive !important;
    font-size: 60px !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    color: #871715 !important;
    text-align: center !important;
}

/* FAQ Unterseite */
.faq-title{
    text-align: center;
    margin-top: 30px;
    margin-bottom: 15px;
}

.faq-title h1{
    margin: 0;
    font-family: 'Parisienne', cursive;
    font-weight: 400;
    font-size: 60px;
    color: #871715;
}

.faq-intro{
    text-align:center;
    max-width:480px;
    margin:10px auto 15px auto;
    font-size:14px;
    line-height:1.6;
    color:black;
}
/* =========================================================
   FAQ Unterseite – Responsive Überschrift & Intro
   ========================================================= */

/* iPad / Tablet */
@media (min-width: 769px) and (max-width: 1100px){
    .faq-title{
        max-width: 620px;
        margin: 24px auto 12px auto;
        padding: 0 20px;
    }

    .faq-title h1{
        font-size: 50px;
        line-height: 1.15;
    }

    .faq-intro{
        max-width: 520px;
        margin: 8px auto 18px auto;
        padding: 0 20px;
        font-size: 14px;
        line-height: 1.6;
        box-sizing: border-box;
    }
}

/* Handy */
@media (max-width: 768px){
    .faq-title{
        max-width: 360px;
        margin: 20px auto 10px auto;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .faq-title h1{
        font-size: 42px;
        line-height: 1.18;
        word-break: normal;
        overflow-wrap: break-word;
    }

    .faq-intro{
        max-width: 100%;
        margin: 8px auto 18px auto;
        padding: 0 18px;
        font-size: 14px;
        line-height: 1.65;
        box-sizing: border-box;
        overflow-wrap: break-word;
        word-break: normal;
    }
}
/* FAQ Kontaktbereich */

.faq-contact{
    text-align:center;
    margin-top:10px;
    margin-bottom:10px;
}

/* Überschrift */

.faq-contact h2{
    font-family:'Parisienne', cursive;
    font-size:40px;
    color:#871715;
    margin-bottom: 8px;
}

/* Text darunter */

.faq-contact p{
    font-size:14px;
    color:black;
    margin-bottom:21px;
}

/* Button */

.faq-contact-btn{
    display:inline-block;
    background:#871715;
    color:#fff;
    padding:11px 22px;
    border-radius:12px;
    font-weight:600;
    font-size:15px;
    text-decoration:none;
    transition:all .2s ease;
}

/* Hover */

.faq-contact-btn:hover{
    background:#6f1211;
    transform:translateY(-1px);
}

/* FAQ */
.fragenantworten-title{
    max-width: 760px;
    margin: 30px auto 20px auto;
    text-align: center !important;
    padding: 0 20px;
}

.fragenantworten-title h1{
    margin: 0 0 14px 0 !important;
    font-family: 'Parisienne', cursive !important;
    font-size: 60px !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    color: #871715 !important;
    text-align: center !important;
}

.bewertung-title p{
    margin: 0 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
    color: #555 !important;
    text-align: center !important;
}

.bewertung-form-section{
    padding: 0 20px 60px 20px;
}

.bewertung-form-section .container{
    max-width: 100%;
}

.bewertung-form-section{
    margin-top: -15px;
}

@media (max-width: 768px){
    .bewertung-hero{
        padding: 30px 20px 18px 20px;
    }

    .bewertung-image{
        max-width: 100%;
        margin: 0 auto 24px auto;
    }

    .bewertung-image img{
        border-radius: 14px;
    }

    .bewertung-title{
        margin: 0 auto 24px auto;
        padding: 0 12px;
    }

    .bewertung-title h1{
        font-size: 45px !important;
    }

    .bewertung-title p{
        font-size: 16px !important;
        line-height: 1.55 !important;
    }

    .bewertung-form-section{
        padding: 0 20px 40px 20px;
    }
}

.red-background-box {
    background-color: #871715;
    color: white;
    padding: 60px 20px 120px 20px; 
    text-align: center;
    min-height: 200px;
}

.intro-text {
    max-width: 800px;
    margin: 0 auto;
}

/* Galerie Bereich */
.landhaus-gallery {
    display: flex;
    justify-content: center;
    gap: 30px;
    max-width: 1200px;
    margin: -120px auto 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 5;
}

.gallery-item {
    text-align: center;
    flex: 1;
    min-width: 0;  /* verhindert dass eine box breiter wird als die anderen --> letztes Bild war bei verkleinerten Bildschirm größer */
    display: flex;
    flex-direction: column;
}

.house-slider{
    margin-top: 60px;
    width: 100%;
    padding: 80px 0 100px 0;
}

.house-slider .hero {
    height: 70vh; 
}

.house-details {
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 40px;
}

.house-info-block {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 100px;
}

.house-info-block .info-img {
    position: relative;
    height: 400px;
    overflow: hidden;
}


.house-info-block .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.house-info-block .slide.active {
    opacity: 1;
}

/* Pfeile in den kleinen Slidern etwas dezenter */
.house-info-block .slider-next .arrow-icon, 
.house-info-block .slider-prev .arrow-icon {
    width: 30px; 
}

.house-info-block .slider-next { right: 10px; }
.house-info-block .slider-prev { left: 10px; }

.info-reverse {
    flex-direction: row-reverse;
}

.info-img {
    flex: 1; /* Flex-Item füllt den verfügbaren Platz im Container porportional aus (teilt sich Platz gleichmäßig mit anderen Flex Elementen) */
}

.info-img img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    display: block;
}

.info-text {
    flex: 1;
}

.landhaus-page .info-text h2 {
    font-size: 45px;
    color: #871715;
    margin-top: 0;
}

.info-text p {
    font-size: 16px;
    line-height: 1.8;
}

/* Der Unterseiten-Link */
.btn-landhaus {
    display: inline-block;
    margin-top: 15px;
    color: #871715;
    text-decoration: underline;
    font-weight: bold;
    transition: 0.3s;
}

.intro-text .btn-landhaus {
	color: white;
}

.btn-landhaus:hover {
    color: #c16f6e;
}

.btn-svh-maishofen {
    display: inline-block;
    margin-top: 15px;
    color: #001F54;
    text-decoration: underline;
    font-weight: bold;
    transition: 0.3s;
}

.btn-svh-maishofen:hover {
	opacity: 0.8;
}

.btn-svh-stuhlfelden {
    display: inline-block;
    margin-top: 15px;
    color: #2D5A3F;
    text-decoration: underline;
    font-weight: bold;
    transition: 0.3s;
}

.btn-svh-stuhlfelden:hover {
	opacity: 0.8;
}

/*
.landhaus-prices {
    padding: 60px 40px;
    display: flex;
    justify-content: center;
}

// Die zentrale Box mit Rahmen 
.price-outer-box {
    max-width: 1000px;
    width: 100%;
    border: 1px solid;
    padding: 50px;
    background-color: #ffffff;
    box-sizing: border-box;
}

.price-outer-box h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
}

.wp-block-columns {
    display: flex;
    gap: 40px;
}

.wp-block-column {
    flex: 1;
}

.price-outer-box h3 {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 1px;
    color: #333;
    margin-bottom: 20px;
}

.price-outer-box p {
    font-size: 15px;
    line-height: 1.8;
}
*/

.landhaus-teich-slider{
    margin-top: 60px;
    width: 80%;
    padding: 80px 10% 100px 10%;
}

.landhaus-teich-slider .hero {
    height: 80vh; 
}

contact-footer {
    width: 100%;
    margin-top: 80px;
}

.contact-red-box {
    background-color: #871715;
    color: white;
    padding: 60px 20px;
    text-align: center;
}

.contact-red-box h2 {
    color: white;
    font-size: 50px;
    margin-bottom: 40px;
    margin-top: 0;
}

.contact-grid {
    display: flex;
    justify-content: center;
    gap: 100px; /* Großer Abstand wie im Bild */
    max-width: 1000px;
    margin: 0 auto;
    text-align: left; /* Text innerhalb der Spalten linksbündig */
}

.contact-grid p {
    margin: 5px 0;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
}

/* Mobile Optimierung */

@media (max-width: 1024px) {
    .anfrage-title h1, 
    .jetzt-title h1, 
    .landhaus-title h1 {
        font-size: 48px;
    }
    
    .landhaus-intro-wrapper {
        display: flex;
        flex-direction: column;
        gap: 40px; 
        margin-bottom: 60px;
    }

    .btn-landhaus {
        display: inline-block;
        margin-top: 20px;
        margin-bottom: 20px; 
    }

    .landhaus-gallery {
        margin-top: 20px; 
    }

    .subpage-layout .hero,
    .subpage-layout .house-slider .hero {
        max-width: 95%;
        height: 50vh;
        min-height: 350px;
        position: relative;
        display: block;
    }
}

@media (max-width: 768px) {
    
    .landhaus-title h1, 
    .anfrage-title h1, 
    .jetzt-title h1 {
        font-size: 34px;
    }

    .landhaus-title {
        padding: 20px 15px 10px 15px;
    }

    .landhaus-desc {
        padding: 20px 15px;
        font-size: 15px;
    }

    .contact-red-box h2 {
        font-size: 30px;
    }
	
	.contact-red-box p {
        font-size: 13px;
    }

    /* Intro Bereich & Galerie */
    .landhaus-intro-wrapper {
        margin-bottom: 40px;
        padding: 20px 0;
        gap: 50px;
    }

    .red-background-box {
        padding: 40px 20px; 
    }

    .intro-text {
        padding-bottom: 10px;
        text-align: center;
    }
    
    .btn-landhaus {
        margin-bottom: 20px;
        font-size: 16px;
        padding: 12px 24px;
        display: inline-block;
    }

    .landhaus-gallery {
        flex-direction: column;
        align-items: center;
        gap: 40px; 
        margin-top: 20px;
    }

    .gallery-item {
        width: 100%;
        max-width: 400px;
    }

    .gallery-item img {
        height: 200px;
    }

    /* Hero Video & Slider Unterseiten */
    .hero-video {
        height: 50vh; 
    }

    .subpage-layout .hero, 
    .subpage-layout .house-slider .hero {
        max-width: 100%;
        height: 40vh;
        min-height: 250px;
        border-radius: 0;
        position: relative;
        overflow: hidden;
    }

    /* Haus Info Blöcke (Zimmer/Details) */
    .house-info-block, 
    .house-info-block.info-reverse { 
        flex-direction: column !important; 
        gap: 20px;
        margin-bottom: 60px;
        padding: 0 20px;
    }

    .house-info-block .info-img {
        width: 100%;
        height: 300px;
        flex: none; 
        order: 1;
    }

    .house-info-block .info-text {
        width: 100%;
        text-align: center;
        order: 2;
        padding: 0;
    }

    .house-info-block .slide img {
        height: 300px;
        object-fit: cover;
    }

    /* Preisliste & Tabellen */
    .subpage-layout .compact-section {
        padding: 10px 15px;
    }

    .subpage-layout .preisliste-content {
        padding: 10px;
        max-width: 100%;
        overflow-x: auto;
    }

    .subpage-layout .preisliste-content table {
        font-size: 12px;
    }

    .subpage-layout .preisliste-content table th, 
    .subpage-layout .preisliste-content table td {
        padding: 8px 2px;
    }

    /* Anfrage Seite */
    .anfrage-hero {
        padding: 20px;
    }

    .anfrage-image {
        max-width: 100%;
        margin: 0 auto 24px auto;
    }

    .anfrage-image img {
        border-radius: 14px;
    }

    .anfrage-title {
        margin-bottom: 20px;
    }

    /* 7. Sonstiges */
    .wp-block-columns {
        flex-direction: column;
        gap: 20px;
    }

    .contact-grid {
        flex-direction: column;
        gap: 40px;
        padding: 0 30px;
        text-align: center;
    }
}




/* Selbstversorgerhaus Maishofen */

.svh-maishofen-page {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.svh-maishofen-title{
    text-align: center; /* Zentriert text nur innerhalb der 800px */
    max-width: 900px;
    margin: 0 auto; /* zentriert gesamte Box */
    padding: 90px 0 20px 0;
}

.svh-maishofen-title h1{
    color: #001F54;
    margin: 0;
}

/*
.svh-maishofen-title .intro-text {
    max-width: 800px;
    margin: 0 auto;
}
*/

.svh-maishofen-gallery-wrapper {
    position: relative;
    padding: 60px 0;
    width: 100%;
    overflow: hidden;
}

.blue-background-box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #001F54;
    height: 260px;
    z-index: 1;
}

.svh-maishofen-gallery {
    display: grid; /* Grid ist stabiler als Flex für exakt gleiche Spalten */
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

.svh-maishofen-gallery .gallery-item h3 {
    color: white; 
    position: relative;
    z-index: 2;
    padding-top: 15px;
}

.svh-image {
    width: 100%;
    padding: 60px 0;
    display: flex;
    justify-content: center;
}

.house-image-container {
    max-width: 1000px;
    width: 100%;
    padding: 0 40px
}

.house-image-container img {
    width: 100%;
    max-height: 550px;
    object-fit: cover;
    object-position: center;
    display: block;
}

.svh-maishofen-page .info-text h2 {
    font-size: 45px;
    color: #001F54;
    margin-top: 0;
}


/* WC special container */

.svh-special-info-section {
    width: 100%;
    padding: 60px 0;
    margin: 60px 0;
    position: relative;
    overflow: hidden;
}

.svh-special-info-section.blue-bg{
    background-color: #001F54;
}


.special-info-container {
    max-width: 1100px;
    height: auto;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
}

/* Blaue Box links */
.special-info-content {
    color: white;
    width: 40%;
    z-index: 2;
}

.special-title {
    color: white !important;
    margin-bottom: 20px;
}

/* Slider-Bereich rechts */
.special-info-image.hero-slider {
    width: 50%;
    height: 400px; /* Feste Höhe für den Slider-Bereich */
    position: relative;
}

/* Einzelne Slides im kleinen Slider */
.special-info-image .slide img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center; /* Fokus auf den oberen/mittleren Bereich */
}

.contact-blue-box {
    background-color: #001F54;
	color: white;
    padding: 60px 20px;
    text-align: center;
}

.contact-blue-box h2 {
    color: white;
    font-size: 50px;
    margin-bottom: 40px;
    margin-top: 0;
}


@media (max-width: 1024px) {

    .svh-maishofen-title {
        padding: 40px 20px 20px 20px;
    }

    .svh-maishofen-gallery {
		display: grid;
        grid-template-columns: 1fr; 
        gap: 30px;
        width: 90%;
        margin: 0 auto;
		justify-items: center; 
    	text-align: center;
    }
	
	.svh-maishofen-gallery .gallery-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .svh-maishofen-gallery .gallery-item img {
        width: 100%; 
        max-width: 600px; 
        height: auto;
    }

    .blue-background-box {
        height: 100%;
    }
	
	/* Silbentrennung und Umbruch für lange Überschriften */
    .svh-maishofen-page h1, 
    .svh-maishofen-page h2, 
    .svh-maishofen-page h3 {
        word-wrap: break-word;
        hyphens: auto;
        padding: 0 10px;
    }

    .special-info-container {
        padding: 0 20px;
		flex-direction: column;
        text-align: center;
    }
	
	.special-info-content {
        width: 100%;
        margin-bottom: 30px;
    }

    .special-info-image.hero-slider {
        width: 100%;
        height: 350px; 
    }
}


@media (max-width: 768px) {
	
	.svh-maishofen-title h1 {
        font-size: 34px;
    }
	
	.svh-maishofen-page .info-text h2 {
        font-size: 28px;
    }

    .svh-maishofen-gallery-wrapper {
        padding: 40px 0;
    }

    .svh-maishofen-gallery {
        grid-template-columns: 1fr;
        text-align: center;
		padding: 0 30px;
    }

    .blue-background-box {
        height: 100%; 
    }

    /* Einzelbilder & Slider */
    .house-image-container {
        padding: 0 15px;
    }

    .house-image-container img {
        max-height: 350px;
    }
	
	.svh-special-info-section {
        margin: 30px 0;
        padding: 30px 0;
    }
	
    .special-info-container {
        flex-direction: column;
        height: auto;
        padding: 40px 20px;
    }

    .special-info-content {
        width: 100%;
        text-align: center;
        margin-bottom: 30px;
    }

    .special-info-image.hero-slider {
        width: 100%;
        height: 70vh;
    }
	
	.contact-blue-box h2 {
        font-size: 30px;
        margin-bottom: 20px;
    }
	.contact-blue-box p {
        font-size: 13px;
    }

}



/* =========================================================
   FAQ Breite auf iPad reduzieren
   ========================================================= */

@media (min-width: 769px) and (max-width: 1100px){

    .lq-faq-wrap{
        max-width: 620px;
        margin: 0 auto;
    }

}


/* Selbstversorgerhaus Stuhlfelden */ 

.svh-stuhlfelden-page {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.svh-stuhlfelden-title{
    text-align: center; /* Zentriert text nur innerhalb der 800px */
    max-width: 900px;
    margin: 0 auto; /* zentriert gesamte Box */
    padding: 90px 0 20px 0;
}

.svh-stuhlfelden-title h1{
    color: rgba(33, 78, 52, 0.89);
    margin: 0;
}

.svh-stuhlfelden-title .intro-text {
    max-width: 800px;
    margin: 0 auto;
}

.svh-stuhlfelden-gallery-wrapper {
    position: relative;
    padding: 40px 0 80px 0;
    width: 100%;
}

.green-background-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(33, 78, 52, 0.89);
    height: 180px; 
    z-index: 1;
}

.svh-stuhlfelden-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Spalten */
    gap: 40px 30px; /* Abstand zwischen Reihen, Spalten */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

.svh-stuhlfelden-page .info-text h2 {
    font-size: 45px;
    color: rgba(33, 78, 52, 0.89);
    margin-top: 0;
}

.svh-special-info-section.green-bg{
    background-color: rgba(33, 78, 52, 0.89);
}

.contact-green-box {
    background-color: rgba(33, 78, 52, 0.89);
	color: white;
    padding: 60px 20px;
    text-align: center;
}

.contact-green-box h2 {
    color: white;
    font-size: 50px;
    margin-bottom: 40px;
    margin-top: 0;
}

@media (max-width: 1024px) {

    .svh-stuhlfelden-title {
        padding: 40px 20px 20px 20px;
    }

    .svh-stuhlfelden-gallery {
        grid-template-columns: 1fr; 
        gap: 30px;
        width: 90%;
        margin: 0 auto;
        justify-items: center;
        text-align: center;
    }
	
	.svh-stuhlfelden-gallery .gallery-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
	
	.svh-stuhlfelden-gallery .gallery-item img {
        width: 100%;
        max-width: 600px; 
        height: auto;
    }
	
	.svh-stuhlfelden-gallery .gallery-item h3 {
        color: #ffffff;
        font-size: 20px;
        margin-top: 15px;
    }

    .green-background-box {
        height: 100%; 
        top: 0;
    }

    /* Text-Sicherheit gegen Abschneiden am Rand */
    .svh-stuhlfelden-page h1, 
    .svh-stuhlfelden-page h2, 
    .svh-stuhlfelden-page h3,
    .svh-stuhlfelden-page .intro-text {
        word-wrap: break-word;
        hyphens: auto;
        padding: 0 15px;
    }

    /* Galerie Items zentrieren */
    .svh-stuhlfelden-gallery .gallery-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 768px) {
    
    .svh-stuhlfelden-title h1 {
        font-size: 32px;
    }

    .svh-stuhlfelden-page .info-text h2 {
        font-size: 28px;
    }

    .svh-stuhlfelden-gallery-wrapper {
        padding: 40px 0;
    }

    .svh-stuhlfelden-gallery {
        grid-template-columns: 1fr;
        width: 85%;
        padding: 0;
    }

    .green-background-box {
        height: 100%;
    }

    .contact-green-box h2 {
        font-size: 30px;
        margin-bottom: 20px;
    }

    .contact-green-box p {
        font-size: 14px;
    }

    .svh-stuhlfelden-title .intro-text {
        max-width: 100%;
        padding: 0 10px;
    }
}