/* Schriftarten  */
/*****************/

/* 'Cinzel Decorative' */
@font-face {
    font-family: 'Cinzel Decorative';
    font-weight: 700;
    font-style: normal;
    src: url('fonts/cinzel-decorative-v16-latin-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Cinzel Decorative';
    font-weight: 900;
    font-style: normal;
    src: url('fonts/cinzel-decorative-v16-latin-900.woff2') format('woff2');
}
@font-face {
    font-family: 'Cinzel Decorative';
    font-weight: normal;
    font-style: normal;
    src: url('fonts/cinzel-decorative-v16-latin-regular.woff2') format('woff2');
}

 /* 'Raleway' */
 @font-face {
    font-family: 'Raleway';
    font-weight: 100;
    font-style: normal;
    src: url('fonts/raleway-v28-latin_latin-ext-100.woff2') format('woff2');
}
@font-face {
    font-family: 'Raleway';
    font-weight: 100;
    font-style: italic;
    src: url('fonts/raleway-v28-latin_latin-ext-100italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Raleway';
    font-weight: 200;
    font-style: normal;
    src: url('fonts/raleway-v28-latin_latin-ext-200.woff2') format('woff2');
}
@font-face {
    font-family: 'Raleway';
    font-weight: 200;
    font-style: italic;
    src: url('fonts/raleway-v28-latin_latin-ext-200italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Raleway';
    font-weight: 300;
    font-style: normal;
    src: url('fonts/raleway-v28-latin_latin-ext-300.woff2') format('woff2');
}
@font-face {
    font-family: 'Raleway';
    font-weight: 300;
    font-style: italic;
    src: url('fonts/raleway-v28-latin_latin-ext-300italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Raleway';
    font-weight: 500;
    font-style: normal;
    src: url('fonts/raleway-v28-latin_latin-ext-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Raleway';
    font-weight: 500;
    font-style: italic;
    src: url('fonts/raleway-v28-latin_latin-ext-500italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Raleway';
    font-weight: 600;
    font-style: normal;
    src: url('fonts/raleway-v28-latin_latin-ext-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Raleway';
    font-weight: 600;
    font-style: italic;
    src: url('fonts/raleway-v28-latin_latin-ext-600italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Raleway';
    font-weight: 700;
    font-style: normal;
    src: url('fonts/raleway-v28-latin_latin-ext-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Raleway';
    font-weight: 700;
    font-style: italic;
    src: url('fonts/raleway-v28-latin_latin-ext-700italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Raleway';
    font-weight: 800;
    font-style: normal;
    src: url('fonts/raleway-v28-latin_latin-ext-800.woff2') format('woff2');
}
@font-face {
    font-family: 'Raleway';
    font-weight: 800;
    font-style: italic;
    src: url('fonts/raleway-v28-latin_latin-ext-800italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Raleway';
    font-weight: 900;
    font-style: normal;
    src: url('fonts/raleway-v28-latin_latin-ext-900.woff2') format('woff2');
}
@font-face {
    font-family: 'Raleway';
    font-weight: 900;
    font-style: italic;
    src: url('fonts/raleway-v28-latin_latin-ext-900italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Raleway';
    font-style: italic;
    src: url('fonts/raleway-v28-latin_latin-ext-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Raleway';
    font-weight: normal;
    font-style: normal;
    src: url('fonts/raleway-v28-latin_latin-ext-regular.woff2') format('woff2');
}

/* Globale Stildefinitionen */
/****************************/

/* Anker-Stil zurücksetzen */
a {
    text-decoration: none; /* Entfernt die Standard-Textunterstreichung für Links */
    color: inherit; /* Vererbt die Textfarbe von übergeordneten Elementen */
}

/* Texte mit individueller Schriftart */
body {
    font-family: 'Raleway', sans-serif; /* Texte im Body-Bereich verwenden die Schriftart Raleway */
    padding: 0; /* Innenabstand auf 0 setzen */
    margin: 0 auto; /* Oberen und unteren Außenabstand auf 0 setzen Oberen und unteren Außenabstand auf 0 setzen und horizontal zentrieren */
}

/* Überschriften mit individueller Schriftart */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cinzel Decorative', sans-serif; /* Überschriften erhalten die Schriftart Cinzel Decorative */
}

/* Flexbox-Container */
/*********************/
.wrapper {
    display: flex;
    flex-direction: column;
    max-width: 100%; /* Setzt die maximale Breite auf 85% der Bildschirmbreite */
    padding: 0; /* Innenabstand auf 0 setzen */
    margin: 0 auto; /* Oberen und unteren Außenabstand auf 0 setzen Oberen und unteren Außenabstand auf 0 setzen und horizontal zentrieren */
}

/* Header-Stil */
/***************/
header {
    position: sticky; /* Header "sticky" fixieren */
    top: 0; /* Den Header oben am Bildschirm positionieren */
    background-color: rgba(0, 0, 0, 0.7); /* Hintergrundfarbe für den Header mit leichter Transparenz */
    z-index: 1000; /* z-index auf 1000 setzen, um sicherzustellen, dass der Header immer über anderen Elementen liegt */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schatten-Effekt für den Header */
}
.header-container {
    display: flex; /* Flexbox-Layout verwenden */
    justify-content: space-between; /* verteilt den verfügbaren Platz zwischen den Elementen */
    align-items: center; /* Zentriert die Elemente sowohl vertikal als auch horizontal innerhalb des Containers */
    text-align: center; /* Elemente horizontal zentrieren */
    padding: 0; /* Innenabstand auf 0 setzen */
    margin: 0 auto; /* Oberen und unteren Außenabstand auf 0 setzen Oberen und unteren Außenabstand auf 0 setzen und horizontal zentrieren */
}

/* Stil für das Logo im Header */
.logo img {
    max-width: 60%; /* Maximale Breite des Bildes auf 50% setzen */
    max-height: 100%; /* Maximale Höhe des Bildes auf 100% setzen */
    width: auto; /* Automatische Anpassung der Breite an die Höhe */
    height: auto; /* Automatische Anpassung der Höhe an die Breite */
    vertical-align: middle; /* Vertikal ausrichten, um die Bildmitte auf der Höhe des umgebenden Texts zu zentrieren */
}

/* Stil für den Bereich unterhalb des Headers */
#below-top {
    background: #31a9a9; /* Hintergrundfarbe in Türkis */
    color: white; /* Textfarbe auf Weiß */
    padding: 0; /* Innenabstand auf 0 setzen */
    margin: 0 auto; /* Oberen und unteren Außenabstand auf 0 setzen Oberen und unteren Außenabstand auf 0 setzen und horizontal zentrieren */
    height: 32px; /* Festgelegte Höhe von 32 Pixeln */
    width: 100%; /* Automatische Anpassung der Breite an die Höhe */
    max-width: 100%; /* Maximale Breite des Bildes auf 100% setzen */
    max-height: 100%; /* Maximale Höhe des Bildes auf 100% setzen */
}

/* Stil für die Kontaktinformationen */
.contact-info {
    display: flex; /* Verwendung von Flexbox-Layout */
    justify-content: space-between; /* Platz zwischen den Elementen verteilen */
    align-items: center; /* Vertikal zentrierte Ausrichtung der Elemente */
    height: 100%; /* Die Höhe des Elements auf 100% setzen */
    padding: 0 20px; /* Innenabstand von 0 oben/unten und 20px links/rechts */
}

/* Stil für die Icons */
.icon {
    color: white; /* Die Farbe des Icons auf Weiß setzen */
    margin-right: 5px; /* Einen Abstand von 5px zwischen dem Icon und dem Text hinzufügen */
}

/* Stil für den linken Textbereich */
.left-text {
    font-size: 12px; /* Schriftgröße auf 12px setzen */
    display: flex; /* Flexbox-Layout verwenden */
    align-items: center; /* Vertikal zentrierte Ausrichtung der Elemente */
    margin-left: 20px; /* Einen linken Abstand von 20px hinzufügen (ursprünglich kommentiert als 10px) */
}

/* Stil für den rechten Textbereich */
.right-text {
    font-size: 12px; /* Schriftgröße auf 12px setzen */
    display: flex; /* Flexbox-Layout verwenden */
    color: white; /* Textfarbe auf Weiß setzen */
    align-items: center; /* Vertikal zentrierte Ausrichtung der Elemente */
    text-align: right; /* Rechtsbündige Textausrichtung */
    text-decoration: none; /* Unterstreichung für Links entfernen */
}

/* CSS für die Flaggen und den Abstand */
.flag {
    margin-left: 10px; /* Anpassen des linken Abstands zwischen den Flaggen und dem vorherigen Element */
}
.flag img {
    height: 15px; /* Anpassen der Höhe der Flaggen */
    margin-right: 5px; /* Anpassen des horizontalen Abstands zwischen den Flaggen */
}

/* Stiländerung bei Hover für den rechten Textbereich */
.right-text:hover {
    color: white; /* Textfarbe auf Weiß ändern, wenn der Mauszeiger darüber schwebt */
}

/* Banner-Bereich-Stil */
/*********************/
#banner {
    padding: 0; /* Innenabstand auf 0 setzen */
    margin: 0 auto; /* Oberen und unteren Außenabstand auf 0 setzen Oberen und unteren Außenabstand auf 0 setzen und horizontal zentrieren */
}
#banner img {
    max-width: 100%; /* Maximale Breite des Bildes auf 100% setzen */
    max-height: 100%; /* Maximale Höhe des Bildes auf 100% setzen */
    width: auto; /* Automatische Anpassung der Breite an die Höhe */
    height: auto; /* Automatische Anpassung der Höhe an die Breite */
}

/* Hero-Bereich-Stil */
/*********************/
#hero {
    color: #fff; /* Textfarbe auf Weiß setzen */
    text-align: center; /* Zentrierte Textausrichtung */
    padding: 0; /* Innenabstand auf 0 setzen */
    margin: 0 auto; /* Oberen und unteren Außenabstand auf 0 setzen Oberen und unteren Außenabstand auf 0 setzen und horizontal zentrieren */
    width: 80%; /* Breite auf 80% der Seitenbreite setzen */
    margin: 0 auto; /* Oberen und unteren Außenabstand auf 0 setzen Oberen und unteren Außenabstand auf 0 setzen und horizontal zentrieren */
    box-sizing: border-box; /* Rand und Padding in die Breite einberechnen */
}

/* Appartment-Bereich-Stil */
/***************************/
.appartement h3, .appartement p {
    text-decoration: none; /* Keine Unterstreichung für Links in Überschriften und Absätzen */
    color: black; /* Schwarze Schriftfarbe für Überschriften und Absätze */
}
#appartements {
    padding: 0; /* Innenabstand auf 0 setzen */
    text-align: left; /* Linksbündige Textausrichtung */
    margin: 0 auto; /* Oberen und unteren Außenabstand auf 0 setzen Oberen und unteren Außenabstand auf 0 setzen und horizontal zentrieren */
    text-decoration: none; /* Keine Unterstreichung für Absätze */
    color: black; /* Textfarbe auf Schwarz setzen */    
}

/* Stil für Überschrift h2 im Appartment-Bereich */
#appartements h2 {
    font-size: 24px; /* Schriftgröße auf 24px setzen */
    text-align: center; /* Zentrierte Textausrichtung für Überschriften */
    margin: 0 auto; /* Oberen und unteren Außenabstand auf 0 setzen Oberen und unteren Außenabstand auf 0 setzen und horizontal zentrieren */
    color: black; /* Textfarbe auf Schwarz setzen */
}
#appartements h3 {
    font-size: 16px; /* Schriftgröße auf 20px setzen */
    text-align: left; /* Zentrierte Textausrichtung für Überschriften */
    margin: 0 auto; /* Oberen und unteren Außenabstand auf 0 setzen Oberen und unteren Außenabstand auf 0 setzen und horizontal zentrieren */
    color: black; /* Textfarbe auf Schwarz setzen */
}

/* Stil für die Galerie */
.galerie {
    display: flex; /* Flexbox-Layout verwenden */
    justify-content: space-between; /* Zwischen den Bildern Platz schaffen */
    flex-wrap: wrap; /* Umbruch für kleinere Bildschirme aktivieren */
    text-decoration: none; /* Keine Unterstreichung für Absätze */
    color: black; /* Textfarbe auf Schwarz setzen */
}

/* Stil für einzelne Appartements */
.appartement {
    width: calc(33.33% - 20px); /* Drei-spaltige Aufteilung mit Abstand */
    margin-bottom: 0; /* Unten keinen Abstand hinzufügen */
    position: relative;
    overflow: hidden;
    transition: transform 0.3s; /* Zoom-Hover-Effekt */
    text-decoration: none; /* Keine Unterstreichung für Absätze */
    color: black; /* Textfarbe auf Schwarz setzen */
}

/* Stil für Bilder innerhalb der Appartements */
.appartement img {
    max-width: 100%; /* Maximale Breite auf 100% setzen */
    height: auto; /* Automatische Höhe beibehalten */
    border-radius: 5px; /* Abrundung der Ecken */
    transition: transform 0.3s; /* Zoom-Hover-Effekt */
}

/* Zoom-Effekt beim Hover für Appartements */
.appartement:hover {
    transform: scale(1.05); /* Vergrößerungseffekt beim Hover */
    text-decoration: none; /* Keine Unterstreichung für Absätze */
    color: black; /* Textfarbe auf Schwarz setzen */
}

/* Stil für Überschriften innerhalb der Appartements */
.appartement h3 {
    font-size: 24px; /* Schriftgröße auf 24 Pixel setzen */
    margin-top: 5px; /* Oben 5px Abstand hinzufügen */
    margin-left: 25px; /* Links 25px Abstand hinzufügen */
    text-decoration: none; /* Keine Unterstreichung für Überschriften */
    color: black; /* Textfarbe auf Schwarz setzen */
    margin-bottom: 5px; /* Unten 5px Abstand hinzufügen */
}

/* Stil für Absätze innerhalb der Appartements */
.appartement p {
    font-size: 16px; /* Schriftgröße auf 16 Pixel setzen */
    margin-top: 0; /* Oben keinen Abstand hinzufügen */
    margin-left: 25px; /* Links 25px Abstand hinzufügen */
    text-decoration: none; /* Keine Unterstreichung für Absätze */
    color: black; /* Textfarbe auf Schwarz setzen */
}

/* Stil für Zeilenumbrüche innerhalb der Appartements */
.appartement br {
    font-size: 16px; /* Schriftgröße auf 16 Pixel setzen */
    margin-top: 0; /* Oben keinen Abstand hinzufügen */
    margin-left: 25px; /* Links 25px Abstand hinzufügen */
    text-decoration: none; /* Keine Unterstreichung für Absätze */
    color: black; /* Textfarbe auf Schwarz setzen */
}

/* Stil für den Preisauskunft & Buchung Button */
.appartement p.preis-button {
    text-align: right; /* Den Text rechtsbündig ausrichten */
    margin-top: 0; /* Einen Abstand nach oben hinzufügen */
    display: inline-block; /* Das Element als Inline-Block anzeigen */
    padding: 10px 20px; /* Innenabstände für den Button festlegen */
    background-color: #31a9a9; /* Aqua Hintergrundfarbe setzen */
    color: white; /* Weiße Schriftfarbe verwenden */
    border-radius: 5px; /* Abrundung der Ecken */
    transition: background-color 0.3s, color 0.3s; /* Sanfter Farbübergang bei Hover */
}

/* Hover-Effekt für den Button */
.appartement p.preis-button:hover {
    background-color: #00c9c9; /* Dunklere Hintergrundfarbe beim Hover */
    color: #fff; /* Weiße Schriftfarbe beim Hover beibehalten */
}

/* Kontakt-Bereich-Stil */
/************************/
.kontakt-section {
    text-align: center; /* Zentrierung des Texts im Kontaktbereich */
    padding: 100px 0; /* Innenabstände oben und unten festlegen */
    width: 80%; /* Breite des Kontaktbereichs auf 80% der Seitenbreite setzen */
    margin: 0 auto; /* Horizontale Zentrierung des Kontaktbereichs */
    box-sizing: border-box; /* Rand und Padding in die Breite einberechnen */
    margin-bottom: 0; /* Kein Abstand am unteren Rand des Kontaktbereichs */
}

/* Stil für die Überschrift im Kontaktbereich */
.kontakt-section h2 {
    font-size: 24px; /* Schriftgröße auf 24px setzen */
    text-align: center; /* Zentrierte Textausrichtung für Überschriften */
    margin-bottom: 0; /* Unten 20px Abstand hinzufügen */
    color: black; /* Textfarbe auf Schwarz setzen */
}

/* Formular-Tabelle-Stil */
.formular-tabelle {
    width: 100%; /* Die Tabelle erstreckt sich über die volle Breite */
    text-align: left; /* Text linksbündig ausrichten */
    background-color: #f5f5f5; /* Hintergrundfarbe nur für die Tabelle */
}
.formular-tabelle td {
    padding: 10px; /* Innenabstand für Zellen hinzufügen */
}
.formular-links {
    width: auto; /* Breite des linken Teils an den Inhalt anpassen */
    vertical-align: top; /* Vertikale Ausrichtung oben */
}
.formular-rechts {
    width: 70%; /* Breite des rechten Teils auf 70% der Tabelle setzen */
    vertical-align: top; /* Vertikale Ausrichtung oben */
}
.formular-label {
    padding: 10px; /* Innenabstand für Label hinzufügen */
    width: 40%; /* Breite des Label-Bereichs auf 40% der Zellenbreite setzen */
    vertical-align: top; /* Vertikale Ausrichtung oben */
}
.formular-input {
    padding: 10px; /* Innenabstand für Eingabefelder hinzufügen */
    width: 60%; /* Breite des Eingabefeld-Bereichs auf 60% der Zellenbreite setzen */
}
.formular-input input[type="text"], .formular-input textarea {
    width: 100%; /* Die Eingabefelder erstrecken sich über die volle Breite */
    padding: 10px; /* Innenabstand für Eingabefelder hinzufügen */
    border-radius: 5px; /* Abrundung der Ecken für Eingabefelder */
}
.formular-input textarea {
    height: 120px; /* Festlegen der Höhe für Textareas */
}
.formular-button {
    text-align: center; /* Zentrierung des Texts im Button */
    padding-top: 20px; /* Abstand oben für den Button hinzufügen */
    border-top: 1px solid #ddd; /* Hinzufügen einer oberen Grenze zur Button-Spalte */
}

/* Stil für den Kontaktformular-Button */
.formular-button button[type="submit"] {
    text-align: right; /* Den Text rechtsbündig ausrichten */
    display: inline-block; /* Das Element als Inline-Block anzeigen */
    padding: 10px 20px; /* Innenabstände für den Button festlegen */
    background-color: #31a9a9; /* Aqua Hintergrundfarbe setzen */
    color: white; /* Weiße Schriftfarbe verwenden */
    border-radius: 5px; /* Abrundung der Ecken */
    transition: background-color 0.3s, color 0.3s; /* Sanfter Farbübergang bei Hover */
}

/* Hover-Effekt für den Kontaktformular-Button */
.formular-button button[type="submit"]:hover {
    background-color: #00c9c9; /* Dunklere Hintergrundfarbe beim Hover */
    color: #fff; /* Weiße Schriftfarbe beim Hover beibehalten */
}

/* Footer-Stil */
/***************/
footer {
    background-color: rgba(0, 0, 0, 0.7); /* Hintergrundfarbe für den Footer mit leichter Transparenz */
    color: #fff; /* Weiße Schriftfarbe für den Footer-Text */
    text-align: center; /* Text zentrieren */
    padding: 0; /* Kein Innenabstand im Footer */
    display: flex; /* Flexbox-Layout verwenden */
    justify-content: center; /* Horizontal zentriert ausrichten */
    align-items: center; /* Vertikal zentriert ausrichten */
    height: 60px; /* Höhe des Footers */
}
.footer-separator {
    margin-left: 10px; /* Abstand zwischen den Links auf der linken Seite */
    margin-right: 0; /* Kein Abstand auf der rechten Seite */
}
.footer-link {
    text-decoration: none; /* Keine Unterstreichung für Footer-Links */
    color: #fff; /* Weiße Schriftfarbe für Footer-Links */
    margin-left: 10px; /* Abstand zwischen den Links auf der linken Seite */
    margin-right: 10px; /* Abstand zwischen den Links auf der rechten Seite */
}

/* Impressum-Bereich-Stil */
#impressum {
    color: black; /* Schwarze Schriftfarbe für den Text im Impressum */
    text-align: left; /* Text linksbündig ausrichten */
    padding: 0; /* Kein Innenabstand im Impressum */
    width: 80%; /* Breite auf 80% der Seitenbreite setzen */
    margin: 0 auto; /* Zentrierte Ausrichtung des Impressums */
    box-sizing: border-box; /* Rand und Padding in die Breite einberechnen */
    margin-bottom: 0; /* Abstand am unteren Rand des Impressum-Bereichs */
    margin-top: 0; /* Abstand am oberen Rand des Impressum-Bereichs */
}

/* Datenschutz-Bereich-Stil */
#datenschutz {
    color: black; /* Schwarze Schriftfarbe für den Text im Datenschutz-Bereich */
    text-align: left; /* Text linksbündig ausrichten */
    padding: 0; /* Kein Innenabstand im Datenschutz-Bereich */
    width: 80%; /* Breite auf 80% der Seitenbreite setzen */
    margin: 0 auto; /* Zentrierte Ausrichtung des Datenschutz-Bereichs */
    box-sizing: border-box; /* Rand und Padding in die Breite einberechnen */
    margin-bottom: 0; /* Abstand am unteren Rand des Datenschutz-Bereichs */
    margin-top: 0; /* Abstand am oberen Rand des Datenschutz-Bereichs */
}

/* Zurück-nach-oben-Button-Stile */
#back-to-top-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: rgba(49, 169, 169, 0.8); /* Hintergrundfarbe mit Transparenz */
    color: #fff;
    padding: 10px;
    border-radius: 50%;
    display: none;
    cursor: pointer;
    font-size: 24px; /* Ändern Sie die Schriftgröße nach Bedarf */
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Schatteneffekt */
    opacity: 0.9; /* Opazität anpassen, wenn gewünscht */
}
#back-to-top-button a {
    color: #fff;
    text-decoration: none;
}
#back-to-top-button:hover {
    background-color: #00c9c9;
}
.arrow-up {
    vertical-align: middle;
    font-size: 24px; /* Ändern Sie die Schriftgröße nach Bedarf */
}

/* CSS, um die Rahmenanzeige für das iframe zu steuern */
iframe {
    border: none; /* Entfernt den Rahmen um das iframe */
}

/* Medienabfrage für Portrait-Handys */
@media (max-width: 480px) {
    #hero h2 {
        font-size: 18px; /* Schriftgröße auf 18px setzen */
    }
    #hero p {
        font-size: 14px; /* Schriftgröße auf 14px setzen */
        margin: 0 auto; /* Oberen und unteren Außenabstand auf 0 setzen Oberen und unteren Außenabstand auf 0 setzen und horizontal zentrieren */
        color: black; /* Textfarbe auf Schwarz setzen */
    }
    .logo img {
        max-width: 90%; /* Maximale Breite des Bildes auf 50% setzen */
        max-height: 100%; /* Maximale Höhe des Bildes auf 100% setzen */
        width: auto; /* Automatische Anpassung der Breite an die Höhe */
        height: auto; /* Automatische Anpassung der Höhe an die Breite */
        vertical-align: middle; /* Vertikal ausrichten, um die Bildmitte auf der Höhe des umgebenden Texts zu zentrieren */
    }
    .longform {
      display: none;
    }
    .galerie {
        display: flex;
        max-width: 90%; /* Setzt die maximale Breite auf 90% */
        padding: 0; /* Kein Innenabstand im Datenschutz-Bereich */
        margin: 0 auto; /* Zentrierte Ausrichtung des Datenschutz-Bereichs */
        flex-direction: column; /* Elemente untereinander anordnen */
        align-items: center; /* Zentriert die Elemente horizontal */
      } 
    .appartement {
        width: 100%; /* Container auf 100% der Bildschirmbreite setzen */
        margin-bottom: 0; /* Abstand zwischen den Appartements hinzufügen */
        padding: 0 20px; /* Innenabstand von 0 oben/unten und 20px links/rechts */
    }    
    .appartement img {
        max-width: 80%; /* Maximale Breite des Bildes auf 100% setzen */
        max-height: 80%; /* Maximale Höhe des Bildes auf 100% setzen */
        width: auto; /* Automatische Anpassung der Breite an die Höhe */
        height: auto; /* Automatische Anpassung der Höhe an die Breite */
    }
}

/* Medienabfrage alles größer Portrait-Handys */
@media (min-width: 481px) {
    #hero h2 {
        font-size: 24px; /* Schriftgröße auf 24px setzen */
        text-align: center; /* Zentrierte Textausrichtung für Überschriften */
        margin: 0 auto; /* Oberen und unteren Außenabstand auf 0 setzen Oberen und unteren Außenabstand auf 0 setzen und horizontal zentrieren */
        color: black; /* Textfarbe auf Schwarz setzen */
    }
    
    /* Stil für Absatztexte im Hero-Bereich */
    #hero p {
        font-size: 18px; /* Schriftgröße auf 18px setzen */
        margin: 0 auto; /* Oberen und unteren Außenabstand auf 0 setzen Oberen und unteren Außenabstand auf 0 setzen und horizontal zentrieren */
        color: black; /* Textfarbe auf Schwarz setzen */
    }
    .shortform {
      display: none;
    }
}