/* Responsive Styles for Grand Linden Casino Hotel */

/* Tablet - 992px and below */
@media (max-width: 992px) {
    .behaelter {
        padding: 0 1.5rem;
    }

    .willkommen-raster,
    .zimmer-detail,
    .restaurant-volle-karte,
    .annehmlichkeit-hervorgehoben,
    .geteilter-inhalt,
    .text-bild-abschnitt {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .kontakt-formular-wrapper {
        grid-template-columns: 1fr;
    }
}

/* Tablet - 768px and below */
@media (max-width: 768px) {
    .behaelter {
        padding: 0 1.5rem;
    }

    .abschnitt-abstand {
        padding: 3rem 0;
    }

    /* Header */
    .haupt-navigation,
    .kopf-aktion {
        display: none;
    }

    .mobil-menue-umschalter {
        display: flex;
    }

    .kopf-inhalt {
        padding: 1rem 0;
    }

    .logo-text {
        font-size: 1.35rem;
    }

    .logo-slogan {
        font-size: 0.7rem;
    }

    /* Hero */
    .held-titel {
        font-size: 2.5rem;
    }

    .held-untertitel {
        font-size: 1.125rem;
    }

    /* Welcome Section */
    .willkommen-raster {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .willkommen-inhalt,
    .willkommen-bild {
        width: 100%;
    }

    .willkommen-funktionen {
        flex-direction: column;
        gap: 1.5rem;
    }

    .willkommen-bild img {
        height: 400px;
    }

    /* Rooms */
    .zimmer-raster {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .zimmer-karte {
        width: 100%;
    }

    /* Amenities */
    .annehmlichkeiten-symbole {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .annehmlichkeit-element {
        padding: 1rem;
    }

    /* Dining */
    .gastronomie-karten {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .gastronomie-karte {
        width: 100%;
    }

    /* Gallery */
    .galerie-raster {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
    }

    .galerie-element {
        height: 250px;
    }

    /* Testimonials */
    .erfahrungsbericht-folie {
        padding: 2rem 1rem;
    }

    .erfahrungsbericht-text {
        font-size: 1.05rem;
    }

    /* Footer */
    .fusszeile-inhalt {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .fusszeile-unten {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .fusszeile-unten-links {
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Modal */
    .modal-inhalt {
        padding: 2rem 1.5rem;
    }

    /* Booking Form */
    .buchung-formular .formular-reihe {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .formular-aktionen {
        flex-direction: column;
        gap: 1rem;
    }

    .formular-aktionen .schaltflaeche {
        width: 100%;
    }

    /* Booking Section */
    .booking-section {
        padding: 2rem 0;
    }

    .buchung-formular-wrapper {
        padding: 0 1rem;
    }

    .buchung-formular-wrapper h2 {
        font-size: 1.75rem;
    }

    .buchung-formular-wrapper > p {
        font-size: 0.95rem;
    }

    /* Page Hero */
    .seiten-held {
        height: 40vh;
    }

    /* Room Detail */
    .zimmer-detail {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .zimmer-detail-bilder,
    .zimmer-detail-inhalt {
        padding: 0 !important;
        width: 100%;
    }

    .zimmer-detail-bilder {
        position: static !important;
    }

    /* Restaurant Full Card */
    .restaurant-volle-karte {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .restaurant-volles-bild,
    .restaurant-voller-inhalt {
        width: 100%;
    }

    /* Amenity Featured */
    .annehmlichkeit-hervorgehoben {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .annehmlichkeit-hervorgehoben-bild,
    .annehmlichkeit-hervorgehoben-inhalt {
        width: 100%;
    }

    /* Contact Cards */
    .kontakt-karten {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .kontakt-karte {
        width: 100%;
    }

    .kontakt-formular-wrapper {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .kontakt-formular-intro,
    .kontakt-formular-box {
        width: 100%;
    }

    /* Split Content */
    .geteilter-inhalt {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .geteilter-text,
    .geteiltes-bild {
        width: 100%;
    }

    /* Text Image Section */
    .text-bild-abschnitt {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .text-inhalt,
    .bild-inhalt {
        width: 100%;
    }

    /* Entertainment Grid */
    .unterhaltung-raster {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .unterhaltung-karte {
        width: 100%;
    }

    /* Services Icon List */
    .dienste-symbol-liste {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .dienst-symbol-element {
        padding: 1rem;
    }

    /* Features Grid */
    .funktionen-raster {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .funktionen-raster-3 {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .funktion-box,
    .funktion-karte {
        padding: 1.5rem;
    }

    /* FAQ Grid */
    .faq-raster {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Gallery Filters */
    .galerie-filter {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        justify-content: center;
    }

    .filter-schaltflaeche {
        padding: 0.5rem 1rem !important;
        font-size: 0.85rem !important;
        flex: 0 1 auto;
    }

    /* Inline Booking Form */
    .inline-buchung-formular .formular-reihe {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .inline-buchung-formular .formular-reihe .formular-gruppe:last-child {
        grid-column: 1;
    }

    .inline-buchung-formular .formular-reihe .formular-gruppe button {
        width: 100%;
    }

    /* Action Buttons Mobile */
    .formular-aktionen {
        flex-direction: column;
        gap: 1rem;
    }

    .formular-aktionen .schaltflaeche {
        width: 100%;
        margin: 0;
    }

    /* Hero Content Mobile */
    .held-inhalt .schaltflaeche {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        display: block;
    }

    /* Feature Highlights */
    .funktion-highlights {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Legal Pages */
    .legal-content {
        padding: 0 1rem;
    }

    .legal-content h2 {
        font-size: 1.5rem;
        margin-top: 2rem;
    }

    .legal-content h3 {
        font-size: 1.125rem;
    }

    /* Booking Page */
    .buchung-formular {
        padding: 0;
    }

    .formular-gruppe {
        margin-bottom: 1.25rem;
    }

    .formular-gruppe input,
    .formular-gruppe select,
    .formular-gruppe textarea {
        font-size: 16px; /* Prevents zoom on iOS */
    }

    /* Hero Section Mobile */
    .held-abschnitt {
        height: 70vh;
        min-height: 500px;
    }

    .held-inhalt {
        padding: 0 1rem;
    }

    /* Section Headers */
    .section-header {
        margin-bottom: 2rem;
    }

    .abschnitt-titel {
        font-size: 1.75rem;
    }

    .abschnitt-untertitel {
        font-size: 1rem;
    }

    /* Welcome Features */
    .willkommen-funktionen {
        flex-wrap: wrap;
    }

    .funktion-element {
        flex: 1 1 auto;
        min-width: 150px;
    }

    /* Room Cards Mobile */
    .zimmer-karte {
        margin-bottom: 1rem;
    }

    /* Contact Form Mobile */
    .kontakt-formular .formular-reihe {
        grid-template-columns: 1fr;
    }

    /* Newsletter Form Mobile */
    .newsletter-formular input {
        margin-bottom: 0.5rem;
    }

    .newsletter-formular button {
        width: 100%;
    }

    /* CTA Sections */
    .aktion-inhalt,
    .aktion-box {
        padding: 0 1rem;
    }

    /* Restaurant Info Grid */
    .restaurant-info-raster {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Amenity Functions */
    .annehmlichkeit-funktionen {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Text Content Mobile */
    .abschnitt-text {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    /* Price Display Mobile */
    .preis-betrag {
        font-size: 2rem;
    }

    /* Gallery Item Mobile */
    .galerie-element {
        height: 250px;
    }

    /* Testimonial Mobile */
    .erfahrungsbericht-text {
        font-size: 0.95rem;
    }

    /* Footer Mobile */
    .fusszeile-spalte {
        text-align: center;
    }

    .fusszeile-spalte h3,
    .fusszeile-spalte h4 {
        text-align: center;
    }

    /* Booking Form Mobile */
    .buchung-formular .formular-reihe {
        grid-template-columns: 1fr;
    }

    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
    }

    img, video {
        max-width: 100%;
        height: auto;
    }

    /* Table responsive */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Fix for inline elements */
    .schaltflaeche {
        word-wrap: break-word;
        white-space: normal;
    }

    /* Room detail images mobile */
    .zimmer-detail-bilder {
        position: static !important;
    }

    /* Restaurant full card mobile */
    .restaurant-volle-karte.umgekehrt {
        direction: ltr;
    }

    .restaurant-volle-karte.umgekehrt > * {
        direction: ltr;
    }

    /* Amenity featured mobile */
    .annehmlichkeit-hervorgehoben.umgekehrt {
        direction: ltr;
    }

    .annehmlichkeit-hervorgehoben.umgekehrt > * {
        direction: ltr;
    }

    /* Room detail mobile */
    .room-detail.reverse {
        direction: ltr;
    }

    .room-detail.reverse > * {
        direction: ltr;
    }

    /* Zimmer detail mobile */
    .zimmer-detail.umgekehrt {
        direction: ltr !important;
    }

    .zimmer-detail.umgekehrt > * {
        direction: ltr !important;
    }

    /* Virtual tour CTA mobile */
    .aktion-inhalt-zentriert {
        padding: 0 1rem;
    }

    .aktion-inhalt-zentriert .schaltflaeche {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        display: block;
    }

    /* Gallery masonry mobile */
    .galerie-mauerwerk {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .galerie-mauerwerk-element {
        width: 100%;
    }

    /* Price display mobile */
    .zimmer-preis-gross {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .preis-betrag {
        font-size: 2.5rem;
    }

    /* Form row mobile */
    .formular-reihe {
        grid-template-columns: 1fr !important;
    }

    /* Prevent text overflow */
    h1, h2, h3, h4, h5, h6 {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    p, span, a, li {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Container fixes */
    .behaelter {
        overflow-x: hidden;
    }

    /* Video responsive */
    .held-video video {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    /* Image containers */
    .willkommen-bild,
    .zimmer-bild,
    .gastronomie-bild,
    .unterhaltung-bild,
    .geteiltes-bild,
    .bild-inhalt {
        overflow: hidden;
    }

    /* Grid fixes */
    .zimmer-raster,
    .gastronomie-karten,
    .annehmlichkeiten-symbole,
    .galerie-raster {
        grid-template-columns: 1fr;
    }

    /* Ensure all cards are full width */
    .zimmer-karte,
    .gastronomie-karte,
    .unterhaltung-karte,
    .kontakt-karte,
    .funktion-box,
    .funktion-karte {
        width: 100%;
        margin: 0;
    }

    /* Fix overflow issues */
    section {
        overflow-x: hidden;
    }

    /* Button spacing mobile */
    .formular-aktionen a,
    .formular-aktionen button {
        width: 100%;
    }
}

/* Mobile - 480px and below */
@media (max-width: 480px) {
    .behaelter {
        padding: 0 1rem;
    }

    .abschnitt-abstand {
        padding: 2.5rem 0;
    }

    /* Typography */
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    /* Buttons */
    .btn,
    .schaltflaeche {
        padding: 0.75rem 1.5rem;
        font-size: 0.875rem;
        width: 100%;
        display: block;
        text-align: center;
    }

    .btn-lg,
    .schaltflaeche-gross {
        padding: 0.875rem 1.5rem;
        font-size: 0.9rem;
    }

    .schaltflaeche-block {
        width: 100%;
    }

    /* Header */
    .logo-text {
        font-size: 1.25rem;
    }

    .logo-slogan {
        font-size: 0.65rem;
    }

    .mobil-menue {
        width: 100%;
    }

    /* Hero */
    .held-titel {
        font-size: 2rem;
    }

    .held-untertitel {
        font-size: 1rem;
        letter-spacing: 2px;
    }

    .scroll-anzeiger {
        bottom: 1rem;
    }

    /* Welcome */
    .willkommen-bild img {
        height: 300px;
    }

    /* Room Card */
    .zimmer-bild {
        height: 250px;
    }

    .zimmer-info {
        padding: 1.5rem;
    }

    .zimmer-fusszeile {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .zimmer-fusszeile .schaltflaeche {
        width: 100%;
        text-align: center;
    }

    .zimmer-preis {
        text-align: center;
        width: 100%;
    }

    /* Amenity Icon */
    .annehmlichkeit-symbol {
        width: 60px;
        height: 60px;
    }

    .annehmlichkeit-symbol i {
        font-size: 1.5rem;
    }

    /* Dining */
    .gastronomie-bild {
        height: 250px;
    }

    .gastronomie-inhalt {
        padding: 1.5rem;
    }

    .gastronomie-details {
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Gallery */
    .galerie-raster {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .galerie-element {
        height: 250px;
    }

    .galerie-mauerwerk {
        grid-template-columns: 1fr;
    }

    /* Testimonials */
    .erfahrungsbericht-folie {
        padding: 1.5rem 0.5rem;
    }

    .erfahrungsbericht-text {
        font-size: 1rem;
    }

    .schieber-schaltflaeche {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    /* CTA */
    .aktion-inhalt h2 {
        font-size: 1.5rem;
    }

    .aktion-inhalt p {
        font-size: 0.9rem;
    }

    .aktion-inhalt .schaltflaeche {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        display: block;
    }

    .aktion-box .schaltflaeche {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        display: block;
    }

    /* Footer */
    .soziale-links a {
        width: 35px;
        height: 35px;
    }

    .newsletter-formular {
        flex-direction: column;
        gap: 0.5rem;
    }

    .newsletter-formular input {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .newsletter-formular button {
        width: 100%;
    }

    /* Back to Top */
    .zurueck-nach-oben {
        width: 45px;
        height: 45px;
        bottom: 1rem;
        right: 1rem;
    }

    /* Modal */
    .modal-inhalt {
        width: 95%;
        padding: 1.5rem 1rem;
    }

    .modal-kopf h2 {
        font-size: 1.5rem;
    }

    /* Page Hero */
    .seiten-held {
        height: 35vh;
        margin-top: 70px;
    }

    .seiten-titel {
        font-size: 2rem;
    }

    .seiten-untertitel {
        font-size: 1rem;
    }

    /* Room Detail */
    .haupt-zimmer-bild img {
        height: 250px !important;
    }

    .zimmer-miniaturansichten {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .zimmer-detail-fusszeile {
        flex-direction: column !important;
        gap: 1.5rem !important;
        align-items: stretch !important;
    }

    .zimmer-detail-fusszeile .schaltflaeche {
        width: 100% !important;
    }

    .zimmer-preis-gross {
        text-align: center !important;
        flex-direction: column;
        align-items: center;
    }

    .zimmer-detail-fusszeile {
        flex-direction: column;
        gap: 1.5rem;
        align-items: stretch;
    }

    .zimmer-detail-fusszeile .schaltflaeche {
        width: 100%;
    }

    /* Contact */
    .kontakt-karte {
        padding: 1.5rem !important;
    }

    .kontakt-formular-box {
        padding: 1.5rem !important;
    }

    .info-liste-element {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }

    .info-liste-element i {
        margin-top: 0;
    }

    /* Amenities */
    .annehmlichkeit-funktionen {
        grid-template-columns: 1fr !important;
    }

    .annehmlichkeit-funktion-element {
        text-align: center !important;
    }

    /* Entertainment */
    .unterhaltung-inhalt {
        padding: 1.5rem !important;
    }

    /* Gallery Masonry */
    .galerie-mauerwerk {
        grid-template-columns: 1fr !important;
    }

    .galerie-mauerwerk-element {
        height: 300px !important;
    }

    /* Booking Page Mobile */
    .buchung-formular-wrapper {
        padding: 0;
    }

    .buchung-formular-wrapper h2 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .buchung-formular-wrapper > p {
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
    }

    /* Legal Pages Mobile */
    .legal-content {
        padding: 0;
    }

    .legal-content h2 {
        font-size: 1.25rem;
        margin-top: 2rem;
    }

    .legal-content h3 {
        font-size: 1rem;
        margin-top: 1.5rem;
    }

    .legal-content p {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    /* Hero Mobile */
    .held-abschnitt {
        height: 60vh;
        min-height: 400px;
    }

    .held-inhalt {
        padding: 0 1rem;
    }

    .held-titel {
        font-size: 1.75rem;
        margin-bottom: 0.75rem;
    }

    .held-untertitel {
        font-size: 0.9rem;
        margin-bottom: 2rem;
    }

    /* Section Headers Mobile */
    .abschnitt-titel {
        font-size: 1.5rem;
    }

    .abschnitt-untertitel {
        font-size: 0.9rem;
    }

    .abschnitt-beschriftung {
        font-size: 0.75rem;
    }

    /* Form Elements Mobile */
    .formular-gruppe input,
    .formular-gruppe select,
    .formular-gruppe textarea {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0.75rem;
    }

    /* Contact Cards Mobile */
    .kontakt-karten {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .kontakt-karte {
        padding: 2rem 1.5rem;
    }

    /* Restaurant Cards Mobile */
    .restaurant-info-raster {
        grid-template-columns: 1fr;
    }

    /* Amenity Featured Mobile */
    .annehmlichkeit-hervorgehoben-inhalt {
        padding: 0;
    }

    .annehmlichkeit-funktionen {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Lightbox */
    .leuchtkasten-zurueck,
    .leuchtkasten-weiter {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
    }
}

/* Large Desktop - 1400px and above */
@media (min-width: 1400px) {
    .behaelter {
        max-width: 1600px;
    }

    .held-titel {
        font-size: 5.5rem;
    }

    .section-title {
        font-size: 3.5rem;
    }
}

/* Print Styles */
@media print {
    .seiten-kopf,
    .mobil-menue,
    .zurueck-nach-oben,
    .modal,
    .seiten-fusszeile,
    .btn,
    .schaltflaeche,
    .scroll-anzeiger {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .seiten-held {
        margin-top: 0;
    }
}