*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Verdana,sans-serif;font-size:14px;line-height:1.5;color:#333;background:#eef2f5}
a{color:#1a3a5c;text-decoration:none}
a:hover{text-decoration:underline}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* #28: Skip to Content */
.skip-link{position:absolute;top:-40px;left:0;background:#1a3a5c;color:#fff;padding:8px 16px;z-index:999;transition:top 0.3s}
.skip-link:focus{top:0}

/* #27: Scroll Progress */
.scroll-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,#2e86ab,#5bbcd6);width:0;z-index:400;transition:width 0.1s linear}

/* Site Container */
.site-container{max-width:100%;margin:0;box-shadow:none}

/* Header */
#header{background-image:linear-gradient(135deg,rgba(180,130,50,0.35) 0%,rgba(160,100,40,0.2) 20%,rgba(80,120,160,0.15) 50%,rgba(40,80,130,0.25) 100%),url("images/header_beach.jpg");background-size:cover;background-position:center 40%;background-color:#c4a265;padding:32px 30px;position:relative;display:flex;align-items:center;justify-content:space-between;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,0.25)}
#header::after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#e8a83e,#f0c060,#e8a83e);opacity:0.7}
#header .header-text{position:relative;z-index:1}
#header h1{font-size:1.6em;color:#fff;text-shadow:1px 2px 6px rgba(0,0,0,0.5);letter-spacing:0.02em;margin-bottom:2px}
#header h2{font-size:0.85em;font-weight:400;color:rgba(255,255,255,0.95);text-shadow:1px 1px 4px rgba(0,0,0,0.4)}


/* Dark Mode Toggle */
.dark-toggle{position:absolute;right:55px;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);color:#fff;width:32px;height:32px;border-radius:50%;font-size:1.1em;cursor:pointer;z-index:100;display:flex;align-items:center;justify-content:center;transition:background 0.2s}
.dark-toggle:hover{background:rgba(255,255,255,0.3)}
.dark-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Hamburger */
.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;position:absolute;right:15px;top:24px;z-index:100}
.menu-toggle span{display:block;width:24px;height:3px;background:#fff;margin:4px 0;border-radius:2px;transition:transform 0.3s,opacity 0.3s}
.menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* Layout */
.page-wrapper{display:flex;min-height:calc(100vh - 70px)}

/* Sidebar */
#left{width:220px;min-width:220px;background-color:#B4CFED;display:flex;flex-direction:column}

/* #24: Sticky Nav */
.nav-inner{position:sticky;top:0;max-height:100vh;overflow-y:auto}
.nav-inner::-webkit-scrollbar{width:0}

.nav-beach-wrap{position:sticky;bottom:0;margin-top:auto}
.nav-beach-wrap::before{content:'';position:absolute;top:0;left:0;right:0;height:20px;background:linear-gradient(to bottom,#B4CFED,transparent);z-index:1;pointer-events:none}
.nav-beach{display:block;width:100%;height:auto}

/* #30: CSS Beach Scene (replaces photo) */
.beach-scene{margin-top:auto;height:120px;position:sticky;bottom:0;overflow:hidden;background:linear-gradient(to bottom,#B4CFED 0%,#87CEEB 30%,#87CEEB 45%,#f4d9a0 45%,#f4d9a0 65%,#e8c878 65%,#d4b85c 100%)}
.beach-scene .wave{position:absolute;top:42%;left:-20%;width:140%;height:20px;background:rgba(255,255,255,0.25);border-radius:50%;animation:wave 4s ease-in-out infinite}
.beach-scene .wave2{top:44%;animation-delay:1.5s;opacity:0.5}
.beach-scene .sun{position:absolute;top:8px;right:15px;width:28px;height:28px;background:#ffe066;border-radius:50%;box-shadow:0 0 12px rgba(255,224,102,0.6)}
.beach-scene .bird{position:absolute;top:18px;left:30px;font-size:10px;color:#555;animation:fly 6s ease-in-out infinite}
.beach-scene .bird2{left:55px;top:12px;animation-delay:2s}
@keyframes wave{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
@keyframes fly{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-5px)}}

#menu{list-style:none;padding:10px 0}
#menu li a{display:block;padding:6px 15px;color:#1a1a1a;transition:background 0.2s}
#menu li a:hover{background:rgba(255,255,255,0.4);text-decoration:none}
.menu-level1-no a,.menu-level1-act a{font-weight:bold}
.menu-level1-act a{background:rgba(255,255,255,0.3)}
#menu .menu-level2-no a,#menu .menu-level2-act a{padding-left:30px;font-size:0.92em}
#specials{padding:15px;border-top:1px solid rgba(255,255,255,0.5);margin-top:10px}
#specials a{display:block;margin-bottom:8px}
#specials span{font-weight:bold;color:#cc0000}

/* Main */
#main{flex:1;padding:15px 20px;background:#fff}

/* CTA Button */
.btn-cta,
a.btn-cta,
a.btn-cta:link,
a.btn-cta:visited,
.room-content a.btn-cta,
.room-content a.btn-cta:visited,
.cta-box a.btn-cta,
.house-cta a.btn-cta{display:inline-block;background:linear-gradient(135deg,#2e86ab,#1b6a8a);color:#fff !important;padding:12px 32px;border-radius:6px;font-size:1em;font-weight:bold;transition:background 0.3s,transform 0.2s;box-shadow:0 2px 8px rgba(46,134,171,0.3);text-decoration:none}
.btn-cta:hover,
a.btn-cta:hover,
.room-content a.btn-cta:hover,
.cta-box a.btn-cta:hover{background:linear-gradient(135deg,#1b6a8a,#145a75);color:#fff !important;transform:translateY(-1px);text-decoration:none}

/* #21: Scroll Reveal Animation */
.reveal{opacity:0;transform:translateY(20px);transition:opacity 0.6s ease,transform 0.6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* Property Cards */
.property-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 auto 20px}
.property-card{border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.1);background:#fff;transition:transform 0.2s,box-shadow 0.2s;text-decoration:none;color:#333;display:block}
.property-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,0.15);text-decoration:none}

/* #22: Card Gallery */
.card-gallery{position:relative;overflow:hidden;height:260px}
.card-gallery img{width:100%;height:260px;object-fit:cover;object-position:center 55%;display:block;position:absolute;top:0;left:0;opacity:0;transition:opacity 0.4s ease}
.card-gallery img.active{opacity:1;position:relative}
.gallery-dots{position:absolute;bottom:8px;left:0;right:0;text-align:center;z-index:2}
.gallery-dots span{display:inline-block;width:8px;height:8px;background:rgba(255,255,255,0.5);border-radius:50%;margin:0 3px;cursor:pointer;transition:background 0.2s}
.gallery-dots span.active{background:#fff}

.card-gallery .card-label{position:absolute;top:28px;left:-38px;padding:6px 50px;background:rgba(30,60,90,0.8);color:#fff;font-size:0.8em;font-weight:bold;text-shadow:1px 1px 2px rgba(0,0,0,0.4);z-index:2;pointer-events:none;transform:rotate(-35deg);letter-spacing:0.03em;white-space:nowrap}
.property-card .card-body{padding:8px 12px}
.property-card h3{font-size:0.95em;color:#1a3a5c;margin-bottom:4px;display:flex;justify-content:space-between;align-items:baseline}
.card-price{font-size:0.8em;color:#2e86ab;font-weight:bold;white-space:nowrap}
.property-card .card-meta{font-size:0.8em;color:#777;margin-bottom:6px}
.property-card .card-meta span{margin-right:10px}
.card-badges{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
.badge{display:inline-block;font-size:0.7em;padding:2px 7px;border-radius:3px;background:#e8f4f8;color:#2e86ab;font-weight:bold}
.avail-bar{display:flex;height:6px;border-radius:3px;overflow:hidden;margin-top:4px}
.avail-bar span{flex:1}
.avail-free{background:#66bb6a}
.avail-busy{background:#ef5350}
.avail-partial{background:#ffa726}
.avail-label{font-size:0.65em;color:#999;margin-top:2px}

/* #25: Social Proof Bar */
.social-proof{margin:0 auto 24px;display:flex;justify-content:center;gap:24px;flex-wrap:wrap;padding:12px 20px;background:#f0f6fa;border-radius:6px;font-size:0.82em;color:#555;text-align:center}
.social-proof .proof-item{display:flex;align-items:center;gap:6px}
.proof-icon{font-size:1.2em}

/* #26: Comparison Table */
.compare-section{margin:0 auto 30px;overflow-x:auto}
.compare-section h2{font-size:1.1em;color:#1a3a5c;margin-bottom:14px;text-align:center}
.compare-table{width:100%;border-collapse:collapse;font-size:0.82em}
.compare-table th{background:#f0f6fa;padding:8px 10px;text-align:left;color:#1a3a5c;font-weight:bold;border-bottom:2px solid #d0dfe8}
.compare-table td{padding:7px 10px;border-bottom:1px solid #eee;color:#555}
.compare-table tr:hover td{background:#f8fafb}
.check{color:#66bb6a;font-weight:bold}
.cross{color:#ccc}

/* #29: Testimonial Slider */
.reviews-section{margin:0 auto 30px;padding:20px;background:#f8fafb;border-radius:8px;border:1px solid #e8eef3}
.reviews-section h2{font-size:1.1em;color:#1a3a5c;margin-bottom:14px;text-align:center}
.slider-viewport{overflow:hidden;position:relative}
.slider-track{display:flex;transition:transform 0.5s ease}
.review-card{min-width:100%;padding:20px 30px;text-align:center}
.review-stars{color:#e8a83e;font-size:1.1em;margin-bottom:8px}
.review-text{font-size:0.9em;font-style:italic;color:#555;margin-bottom:10px;margin-left:auto;margin-right:auto}
.review-author{font-size:0.8em;color:#999}
.slider-dots{text-align:center;margin-top:12px}
.slider-dots span{display:inline-block;width:10px;height:10px;background:#d0dfe8;border-radius:50%;margin:0 4px;cursor:pointer;transition:background 0.2s}
.slider-dots span.active{background:#2e86ab}

/* FAQ */
.faq-section{margin:0 auto 30px}
.faq-section h2{font-size:1.1em;color:#1a3a5c;margin-bottom:14px;text-align:center}
.faq-item{border:1px solid #e8eef3;border-radius:6px;margin-bottom:8px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,0.25)}
.faq-question{width:100%;background:#f8fafb;border:none;padding:14px 18px;text-align:left;font-family:inherit;font-size:0.9em;font-weight:bold;color:#1a3a5c;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background 0.2s}
.faq-question:hover{background:#eef2f5}
.faq-question::after{content:'+';font-size:1.2em;font-weight:bold;color:#2e86ab}
.faq-item.open .faq-question::after{content:'-'}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.3s ease}
.faq-answer-inner{padding:0 18px 14px;font-size:0.85em;color:#555;line-height:1.6}
.faq-item.open .faq-answer{max-height:200px}

/* #23: Contact Form */
.contact-section{margin:0 auto 30px;padding:24px;background:#f8fafb;border-radius:8px;border:1px solid #e8eef3}
.contact-section h2{font-size:1.1em;color:#1a3a5c;margin-bottom:14px;text-align:center}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact-form .full-width{grid-column:1/-1}
.contact-form label{font-size:0.8em;color:#555;display:block;margin-bottom:3px}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:8px 12px;border:1px solid #d0dfe8;border-radius:4px;font-family:inherit;font-size:0.9em;transition:border-color 0.2s}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:#2e86ab}
.contact-form textarea{resize:vertical;min-height:80px}
.form-submit{grid-column:1/-1;text-align:center;margin-top:4px}

/* Map */
.map-section{margin:0 auto 30px}
.map-section h2{font-size:1.1em;color:#1a3a5c;margin-bottom:14px;text-align:center}
.map-container{border-radius:8px;overflow:hidden;border:1px solid #e8eef3;height:300px;background:#eef2f5;display:flex;align-items:center;justify-content:center}
.map-container iframe{width:100%;height:100%;border:0}
.map-consent{text-align:center;padding:20px;color:#666;font-size:0.85em}
.map-consent button{display:block;margin:10px auto 0;background:#2e86ab;color:#fff;border:none;padding:8px 20px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:0.9em}
.map-consent button:hover{background:#1b6a8a}

/* Prerow Teaser */
.prerow-teaser{margin:0 auto 20px;display:flex;gap:20px;align-items:center;padding:20px;background:#f8fafb;border-radius:8px;border:1px solid #e8eef3}
.prerow-teaser img{width:200px;min-width:200px;height:auto;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,0.1)}
.prerow-teaser h2{font-size:1.1em;color:#1a3a5c;margin-bottom:8px}
.prerow-teaser p{font-size:0.9em;color:#555;margin-bottom:8px}
.prerow-teaser a{font-size:0.85em;font-weight:bold}

/* SEO Links */
.seo-links{margin-top:20px;padding:15px 0;font-size:0.85em;color:#666;border-top:1px solid #eee}
.seo-links a{color:#555;text-decoration:underline}

/* Back to Top */
.back-to-top{position:fixed;bottom:20px;right:20px;width:40px;height:40px;background:#2e86ab;color:#fff;border:none;border-radius:50%;font-size:1.2em;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.2);opacity:0;visibility:hidden;transition:opacity 0.3s,visibility 0.3s;z-index:150}
.back-to-top.visible{opacity:1;visibility:visible}
.back-to-top:hover{background:#1b6a8a}

/* Cookie Banner */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:#1a3a5c;color:#fff;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;z-index:300;box-shadow:0 -2px 10px rgba(0,0,0,0.3);font-size:0.85em}
.cookie-banner.hidden{display:none}
.cookie-banner p{flex:1}
.cookie-banner a{color:#9ec5e8}
.cookie-btns{display:flex;gap:8px;flex-shrink:0}
.cookie-btn{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-family:inherit;font-size:0.9em;font-weight:bold}
.cookie-accept{background:#2e86ab;color:#fff}
.cookie-accept:hover{background:#5bbcd6}
.cookie-decline{background:transparent;color:#9ec5e8;border:1px solid #9ec5e8}
.cookie-decline:hover{background:rgba(255,255,255,0.1)}

/* Mobile CTA */
.mobile-cta{display:none}

/* Focus */
.menu-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}
.property-card:focus-visible{outline:3px solid #1a3a5c;outline-offset:2px}
#menu li a:focus-visible{outline:2px solid #1a3a5c;outline-offset:-2px;background:rgba(255,255,255,0.4)}
.btn-cta:focus-visible{outline:3px solid #1a3a5c;outline-offset:3px}
.faq-question:focus-visible{outline:2px solid #2e86ab;outline-offset:-2px}

@media(max-width:700px){
  .property-grid{grid-template-columns:1fr}
}

/* Tablet */
@media(max-width:768px){
  .menu-toggle{display:block}
  .scroll-progress{top:0}
  #header{padding:18px 20px}
  #header h1{font-size:1.25em}
  #header h2{font-size:0.8em}
  .page-wrapper{flex-direction:column}
  #left{width:100%;min-width:100%;max-height:0;overflow:hidden;transition:max-height 0.4s ease}
  .beach-scene,.nav-beach-wrap{display:none}
  #left.open{max-height:2000px}
  #menu li a{padding:10px 20px;border-bottom:1px solid rgba(255,255,255,0.3)}
  #menu .menu-level2-no a,#menu .menu-level2-act a{padding-left:40px}
  .reviews-section .slider-viewport{overflow:hidden}
  .prerow-teaser{flex-direction:column}
  .prerow-teaser img{width:100%;min-width:unset}
  .map-container{height:250px}
  .contact-form{grid-template-columns:1fr}
  .contact-form .full-width{grid-column:1}
  .compare-table{font-size:0.75em}
  .social-proof{gap:12px;font-size:0.78em}
  .mobile-cta{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:200;background:#1b6a8a;padding:10px 16px;justify-content:center;align-items:center;gap:8px;box-shadow:0 -2px 10px rgba(0,0,0,0.2)}
  .mobile-cta a{color:#fff;font-weight:bold;font-size:0.85em;text-decoration:none;display:flex;align-items:center;gap:4px}
  .mobile-cta .divider{width:1px;height:20px;background:rgba(255,255,255,0.3)}
  body{padding-bottom:52px}
  .back-to-top{bottom:62px}
}

/* Mobile */
@media(max-width:480px){
  #header{padding:14px 15px}
  #header h1{font-size:1.1em}
  #header h2{font-size:0.75em}
  #main{padding:15px}
  .btn-cta{padding:10px 24px;font-size:0.9em}
  .cookie-banner{flex-direction:column;text-align:center}
  .social-proof{flex-direction:column;gap:6px}
}

/* Print */
@media print{
  body{background:#fff;padding-bottom:0}
  .site-container{box-shadow:none;max-width:100%}
  #header{background:none;color:#000;padding:10px 0;border-bottom:2px solid #333}
  #header h1{color:#000;text-shadow:none}
  #header h2{color:#555;text-shadow:none}
  #left,.menu-toggle,.mobile-cta,.btn-cta,.cookie-banner,.back-to-top,.map-section,.scroll-progress,.contact-section{display:none}
  .page-wrapper{display:block}
  #main{padding:10px 0}
  .property-card{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  .reviews-section,.prerow-teaser,.faq-section,.compare-section{border:1px solid #ccc;break-inside:avoid}
  .seo-links{display:none}
  .reveal{opacity:1!important;transform:none!important}
}

/* Dark Mode */
body.dark-mode{background:#1a1f25;color:#ddd}
body.dark-mode a{color:#7bb8d6}
body.dark-mode .site-container{box-shadow:0 1px 12px rgba(0,0,0,0.3)}
body.dark-mode .scroll-progress{background:linear-gradient(90deg,#5bbcd6,#7bb8d6)}
body.dark-mode #left{background-color:#253545}
body.dark-mode .nav-beach-wrap::before{background:linear-gradient(to bottom,#253545,transparent)}
body.dark-mode .beach-scene{background:linear-gradient(to bottom,#253545 0%,#1a2a3a 30%,#1a2a3a 45%,#3a3020 45%,#3a3020 65%,#2a2518 65%,#1a1a10 100%)}
body.dark-mode #menu li a{color:#ccd6de}
body.dark-mode #menu li a:hover{background:rgba(255,255,255,0.1)}
body.dark-mode .menu-level1-act a{background:rgba(255,255,255,0.08)}
body.dark-mode #specials span{color:#ff6b6b}
body.dark-mode #main{background:#222830}
body.dark-mode .property-card{background:#2a3140;box-shadow:0 2px 8px rgba(0,0,0,0.3)}
body.dark-mode .property-card:hover{box-shadow:0 6px 20px rgba(0,0,0,0.4)}
body.dark-mode .property-card h3{color:#9ec5e8}
body.dark-mode .property-card .card-meta{color:#888}
body.dark-mode .card-price{color:#5bbcd6}
body.dark-mode .badge{background:#2a3a4a;color:#7bb8d6}
body.dark-mode .social-proof{background:#2a3140;color:#aaa}
body.dark-mode .compare-table th{background:#2a3140;color:#9ec5e8;border-color:#3a4555}
body.dark-mode .compare-table td{border-color:#3a4555;color:#aaa}
body.dark-mode .compare-table tr:hover td{background:#333d4d}
body.dark-mode .reviews-section,body.dark-mode .contact-section{background:#2a3140;border-color:#3a4555}
body.dark-mode .review-card{background:#222830}
body.dark-mode .review-text{color:#aaa}
body.dark-mode .review-author{color:#777}
body.dark-mode .reviews-section h2,body.dark-mode .faq-section h2,body.dark-mode .contact-section h2,body.dark-mode .compare-section h2,body.dark-mode .map-section h2{color:#9ec5e8}
body.dark-mode .slider-dots span{background:#3a4555}
body.dark-mode .slider-dots span.active{background:#5bbcd6}
body.dark-mode .faq-item{border-color:#3a4555}
body.dark-mode .faq-question{background:#2a3140;color:#9ec5e8}
body.dark-mode .faq-question:hover{background:#333d4d}
body.dark-mode .faq-answer-inner{color:#aaa}
body.dark-mode .contact-form input,body.dark-mode .contact-form select,body.dark-mode .contact-form textarea{background:#1a1f25;border-color:#3a4555;color:#ddd}
body.dark-mode .prerow-teaser{background:#2a3140;border-color:#3a4555}
body.dark-mode .prerow-teaser h2{color:#9ec5e8}
body.dark-mode .prerow-teaser p{color:#aaa}
body.dark-mode .map-container{background:#2a3140;border-color:#3a4555}
body.dark-mode .map-consent{color:#aaa}
body.dark-mode .seo-links{color:#888;border-color:#3a4555}
body.dark-mode .seo-links a{color:#7bb8d6}
body.dark-mode .back-to-top{background:#3a5570}
body.dark-mode .cookie-banner{background:#0d1820}
body.dark-mode .avail-label{color:#777}

/* ── Subpage Content Styles ───────────────────── */

/* ── Submenu (Room Navigation) ───────────────── */
.submenu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid #e8eef3;
  list-style: none;
}

.submenu li a {
  display: inline-block;
  padding: 5px 12px;
  font-size: 0.82em;
  color: #1a3a5c;
  background: #f0f6fa;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
}

.submenu li a:hover {
  background: #2e86ab;
  color: #fff;
  text-decoration: none;
}

.submenu li.submenu-active a {
  background: #2e86ab;
  color: #fff;
  font-weight: bold;
}

@media (max-width: 480px) {
  .submenu {
    gap: 4px;
  }
  .submenu li a {
    padding: 4px 8px;
    font-size: 0.75em;
  }
}

body.dark-mode .submenu{
    border-color: #3a4555;
  }
body.dark-mode .submenu li a{
    background: #2a3a4a;
    color: #9ec5e8;
  }
  body.dark-mode .submenu li a:hover,
body.dark-mode .submenu li.submenu-active a{
    background: #5bbcd6;
    color: #1a1f25;
  }

@media print {
  .submenu { display: none; }
}

/* Styles for TYPO3-generated content on sub-pages */

#content {
}

#content h1 {
  font-size: 1.2em;
  color: #1a3a5c;
  margin: 20px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e8eef3;
}

#content h2 {
  font-size: 1.05em;
  color: #1a3a5c;
  margin: 18px 0 10px;
}

#content h3 {
  font-size: 0.95em;
  color: #333;
  margin: 14px 0 8px;
}

#content .content-text,
#content p {
  margin-bottom: 10px;
  line-height: 1.6;
}

#content a {
  color: #2e86ab;
  text-decoration: underline;
}

#content a:hover {
  color: #1b6a8a;
}

/* Main page heading */
main > h2 {
  font-size: 1.3em;
  color: #1a3a5c;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #2e86ab;
}

/* ── TYPO3 Text-Pic Layouts ──────────────────── */
.csc-textpic {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  align-items: flex-start;
}

.csc-textpic-intext-left-nowrap,
.csc-textpic-intext-left {
  flex-direction: row;
}

.csc-textpic-intext-right-nowrap,
.csc-textpic-intext-right {
  flex-direction: row-reverse;
}

.csc-textpic-imagewrap {
  flex-shrink: 0;
}

.csc-textpic-imagewrap img {
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  max-width: 220px;
  height: auto;
  display: block;
}

.csc-textpic-text {
  flex: 1;
  min-width: 0;
}

.csc-textpic-image {
  margin-bottom: 8px;
}

/* Center/above layout */
.csc-textpic-center,
.csc-textpic-above-center {
  flex-direction: column;
  align-items: center;
}

.csc-textpic-center .csc-textpic-imagewrap img {
  max-width: 100%;
}

/* ── Content Blocks ──────────────────────────── */
.content-block {
  margin-bottom: 20px;
}

.content-header {
  margin-bottom: 10px;
}

/* ── Tables (Availability, Pricing) ──────────── */
#content table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 0.85em;
}

#content table th {
  background: #f0f6fa;
  padding: 8px 10px;
  text-align: left;
  color: #1a3a5c;
  font-weight: bold;
  border-bottom: 2px solid #d0dfe8;
}

#content table td {
  padding: 6px 10px;
  border-bottom: 1px solid #eee;
}

#content table tr:hover td {
  background: #f8fafb;
}

/* Availability colors from original site */
.belegt { background-color: #f7c5c8 !important; }
.frei { background-color: #c5f7d9 !important; }
.belegtfrei { background-color: #f7c5c8 !important; }
.freibelegt { background-color: #f7c5c8 !important; }

/* ── Image Gallery (lightbox images) ─────────── */
#content .csc-textpic-imagewrap a {
  display: inline-block;
  transition: transform 0.2s;
}

#content .csc-textpic-imagewrap a:hover {
  transform: scale(1.03);
}

/* ── Lists ───────────────────────────────────── */
#content ul, #content ol {
  margin: 10px 0 10px 24px;
}

#content li {
  margin-bottom: 4px;
  line-height: 1.5;
}

/* ── Strong / Emphasis ───────────────────────── */
#content strong {
  color: #1a3a5c;
}

/* ── Impressionen Gallery Grid ───────────────── */
.tx-rgsmoothgallery-pi1 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.tx-rgsmoothgallery-pi1 img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* ── Responsive ──────────────────────────────── */
@media (max-width: 768px) {
  .csc-textpic {
    flex-direction: column !important;
  }

  .csc-textpic-imagewrap img {
    max-width: 100%;
  }

  #content table {
    font-size: 0.78em;
  }
}

/* ── Dark Mode ───────────────────────────────── */
  body.dark-mode #content h1,
  body.dark-mode #content h2,
body.dark-mode main > h2{
    color: #9ec5e8;
  }

body.dark-mode main > h2{
    border-color: #5bbcd6;
  }

body.dark-mode #content h1{
    border-color: #3a4555;
  }

body.dark-mode #content a{
    color: #7bb8d6;
  }

body.dark-mode #content a:hover{
    color: #9ec5e8;
  }

body.dark-mode #content strong{
    color: #ccd6de;
  }

body.dark-mode #content table th{
    background: #2a3140;
    color: #9ec5e8;
    border-color: #3a4555;
  }

body.dark-mode #content table td{
    border-color: #3a4555;
    color: #aaa;
  }

body.dark-mode #content table tr:hover td{
    background: #333d4d;
  }

body.dark-mode .belegt{ background-color: #5a2a2a !important; }
body.dark-mode .frei{ background-color: #2a4a2a !important; }

body.dark-mode .csc-textpic-imagewrap img{
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  }

/* ── Print ───────────────────────────────────── */
@media print {
  .csc-textpic {
    flex-direction: column !important;
  }

  body.dark-mode .csc-textpic-imagewrap img {
    box-shadow: none;
    border: 1px solid #ccc;
  }

  #content table {
    font-size: 0.8em;
  }

  main > h2 {
    border-color: #333;
    color: #000;
  }
}

/* ─────────────────────────────────────────────
 * V4 Wohnung/Raum-Detail-CSS
 * Konsolidiert aus den inline-<style>-Blöcken
 * von v4/haus-achtern-prerow/wohnung-1-eg/*.html
 * ───────────────────────────────────────────── */

/* Submenu (horizontal Raum-Nav auf Wohnung/Raum-Pages) */
.submenu-wrap{position:relative;margin-bottom:16px}
.submenu{display:flex;flex-wrap:wrap;gap:6px;padding:12px 0;border-bottom:1px solid #e8eef3;list-style:none}
.submenu li a{display:inline-block;padding:5px 12px;font-size:0.82em;color:#1a3a5c;background:#f0f6fa;border-radius:4px;transition:background 0.2s,color 0.2s;text-decoration:none;white-space:nowrap}
.submenu li a:hover{background:#2e86ab;color:#fff;text-decoration:none}
.submenu li.submenu-active a{background:#2e86ab;color:#fff;font-weight:bold}

/* Apt-Hero (Bilder-Gallery oben auf Wohnungs-Detailseite) */
.apt-hero{position:relative;border-radius:10px;overflow:hidden;margin-bottom:20px;box-shadow:0 4px 16px rgba(0,0,0,0.12)}
.apt-hero-gallery{display:flex;gap:4px;height:260px}
.apt-hero-gallery img{flex:1;object-fit:cover;min-width:0;display:block;transition:flex 0.4s ease}
.apt-hero-gallery img:hover{flex:1.5}
.apt-hero-overlay{position:absolute;bottom:0;left:0;right:0;padding:16px 20px;background:linear-gradient(to top,rgba(0,0,0,0.6),transparent);color:#fff}
.apt-hero-overlay h2{font-size:1.3em;text-shadow:1px 2px 4px rgba(0,0,0,0.5);margin-bottom:2px}
.apt-hero-overlay p{font-size:0.82em;opacity:0.9}

/* Apt-Quick-Facts (Wohnfläche, Personen, Schlafzimmer, Strand, Preis) */
.apt-quick-facts{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.fact-card{flex:1;min-width:120px;background:#f0f6fa;border-radius:6px;padding:12px 14px;text-align:center}
.fact-value{font-size:1.2em;font-weight:bold;color:#2e86ab;display:block}
.fact-label{font-size:0.72em;color:#777;margin-top:2px}

/* Apt-Highlights (3-Spalten-Icon-Cards) */
.apt-highlights{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:24px}
.highlight-card{background:#f8fafb;border:1px solid #e8eef3;border-radius:6px;padding:14px;text-align:center}
.highlight-icon{font-size:1.4em;margin-bottom:4px}
.highlight-text{font-size:0.8em;color:#555}

/* Apt-Sections (Textblöcke darunter) */
.apt-section{margin-bottom:24px}
.apt-section h3{font-size:1.05em;color:#1a3a5c;margin-bottom:10px;padding-bottom:4px;border-bottom:1px solid #e8eef3}
.apt-section p{font-size:0.9em;color:#555;line-height:1.7;margin-bottom:8px}

/* Equipment-Grid (Checkmarks) */
.equip-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;font-size:0.85em;color:#555}
.equip-grid span::before{content:"\2713";color:#66bb6a;font-weight:bold;margin-right:8px}

/* Apt-CTA */
.apt-cta{text-align:center;padding:20px;background:#f0f6fa;border-radius:8px;margin-bottom:16px}
.apt-cta p{color:#555;margin-bottom:10px;font-size:0.9em}
.apt-cta .links{display:flex;justify-content:center;gap:12px;margin-top:12px;font-size:0.85em}
.apt-cta .links a{color:#2e86ab;font-weight:bold}

/* Room-Content (Wrapper auf Raum-Detail-Pages) */
.room-content h1,.room-content h3{font-size:1.05em;color:#1a3a5c;margin:16px 0 10px;padding-bottom:4px;border-bottom:1px solid #e8eef3}
.room-content p,.room-content .content-text{font-size:0.9em;color:#555;line-height:1.7;margin-bottom:10px}
.room-content img{max-width:100%;height:auto;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,0.1);margin:8px 0}
.room-content a{color:#2e86ab}
.room-content .btn-cta{color:#fff}
.room-content table{width:100%;border-collapse:collapse;margin:16px 0;font-size:0.85em}
.room-content table th{background:#f0f6fa;padding:8px 10px;text-align:left;color:#1a3a5c;border-bottom:2px solid #d0dfe8}
.room-content table td{padding:6px 10px;border-bottom:1px solid #eee}
.room-content table tr:hover td{background:#f8fafb}

/* Belegung-Farben */
.belegt{background-color:#f7c5c8 !important}
.frei{background-color:#c5f7d9 !important}

/* TYPO3 4.7 csc-textpic (für legacy-content kompatibel) */
.csc-textpic{display:flex;gap:16px;margin-bottom:16px;align-items:flex-start}
.csc-textpic-imagewrap{flex-shrink:0}
.csc-textpic-imagewrap img{max-width:220px}
.csc-textpic-text{flex:1;min-width:0}
.csc-textpic-caption{font-size:0.75em;color:#999;display:none}

/* Subpage-Headline */
main>h2{font-size:1.3em;color:#1a3a5c;margin-bottom:8px;padding-bottom:8px;border-bottom:2px solid #2e86ab}

/* Back-Link auf Raum-Pages */
.back-link{display:inline-block;margin-bottom:12px;font-size:0.85em;color:#2e86ab;font-weight:bold}
.back-link:hover{text-decoration:underline}

/* Mobile (≤600px): Submenu horizontal scroll mit Fade-Edge */
@media(max-width:600px){
  .submenu-wrap::after{content:'';position:absolute;top:0;right:0;bottom:0;width:30px;background:linear-gradient(to right,transparent,#fff);pointer-events:none;z-index:1}
  .submenu{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .submenu::-webkit-scrollbar{display:none}
  .apt-hero-gallery{height:180px}
  .apt-hero-gallery img:last-child{display:none}
  .equip-grid{grid-template-columns:1fr}
  .apt-highlights{grid-template-columns:1fr 1fr}
  .csc-textpic{flex-direction:column}
  .csc-textpic-imagewrap img{max-width:100%}
}

/* Dark Mode Overrides */
body.dark-mode .submenu{border-color:#3a4555}
body.dark-mode .submenu li a{background:#2a3a4a;color:#9ec5e8}
body.dark-mode .submenu li a:hover,
body.dark-mode .submenu li.submenu-active a{background:#5bbcd6;color:#1a1f25}
body.dark-mode .submenu-wrap::after{background:linear-gradient(to right,transparent,#222830)}
body.dark-mode .fact-card{background:#2a3140}
body.dark-mode .fact-value{color:#5bbcd6}
body.dark-mode .fact-label{color:#888}
body.dark-mode .apt-section h3{color:#9ec5e8;border-color:#3a4555}
body.dark-mode .apt-section p{color:#aaa}
body.dark-mode .equip-grid{color:#aaa}
body.dark-mode .highlight-card{background:#2a3140;border-color:#3a4555}
body.dark-mode .highlight-text{color:#aaa}
body.dark-mode .apt-cta{background:#2a3140}
body.dark-mode .apt-cta p{color:#aaa}
body.dark-mode .room-content h3,
body.dark-mode main>h2{color:#9ec5e8;border-color:#3a4555}
body.dark-mode main>h2{border-color:#5bbcd6}
body.dark-mode .room-content p,
body.dark-mode .room-content .content-text{color:#aaa}
body.dark-mode .room-content a{color:#7bb8d6}
body.dark-mode .room-content table th{background:#2a3140;color:#9ec5e8;border-color:#3a4555}
body.dark-mode .room-content table td{border-color:#3a4555;color:#aaa}
body.dark-mode .belegt{background-color:#5a2a2a !important}
body.dark-mode .frei{background-color:#2a4a2a !important}
body.dark-mode .back-link{color:#5bbcd6}

/* ─────────────────────────────────────────────
 * V4 Haus-Übersicht-Detail-CSS
 * Konsolidiert aus v4/haus-achtern-prerow.html inline-<style>
 * ───────────────────────────────────────────── */

/* House-Hero (großes Header-Bild auf Haus-Übersichts-Page) */
.house-hero{position:relative;border-radius:10px;overflow:hidden;margin-bottom:24px;box-shadow:0 4px 16px rgba(0,0,0,0.12)}
.house-hero img{width:100%;height:280px;object-fit:cover;object-position:center 40%;display:block}
.house-hero-overlay{position:absolute;bottom:0;left:0;right:0;padding:20px 24px;background:linear-gradient(to top,rgba(0,0,0,0.6),transparent);color:#fff}
.house-hero-overlay h2{font-size:1.4em;text-shadow:1px 2px 4px rgba(0,0,0,0.5);margin-bottom:4px}
.house-hero-overlay p{font-size:0.85em;opacity:0.9}

/* House-Features (Badge-Reihe) */
.house-features{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.house-features .badge{font-size:0.78em;padding:4px 10px}

/* House-Intro (Beschreibung) */
.house-intro{font-size:0.95em;color:#555;margin-bottom:28px;line-height:1.7;max-width:700px}

/* Apartments-Heading (Titel über Grid) */
.apartments-heading{font-size:1.15em;color:#1a3a5c;margin-bottom:16px;padding-bottom:6px;border-bottom:2px solid #2e86ab}

/* Apartment-Grid + Apartment-Card */
.apartment-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:30px}
.apartment-card{border-radius:8px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,0.08);background:#fff;border:1px solid #e8eef3;transition:transform 0.2s,box-shadow 0.2s;text-decoration:none;color:#333;display:block}
.apartment-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,0.14);text-decoration:none}
.apartment-card img{width:100%;height:180px;object-fit:cover;display:block}
.apartment-card .apt-body{padding:14px 16px}
.apartment-card h3{font-size:1em;color:#1a3a5c;margin-bottom:6px}
.apt-details{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:0.82em;color:#666;margin-bottom:10px}
.apt-details dt{font-weight:bold;color:#555}
.apt-details dd{margin:0}
.apt-link{font-size:0.85em;font-weight:bold;color:#2e86ab}

/* House-CTA */
.house-cta{text-align:center;padding:24px;background:#f0f6fa;border-radius:8px;margin-bottom:20px}
.house-cta p{color:#555;margin-bottom:12px;font-size:0.9em}

/* Mobile */
@media(max-width:600px){
  .apartment-grid{grid-template-columns:1fr}
  .house-hero img{height:200px}
}

/* Dark Mode */
body.dark-mode .house-intro{color:#aaa}
body.dark-mode .apartments-heading{color:#9ec5e8;border-color:#5bbcd6}
body.dark-mode .apartment-card{background:#2a3140;border-color:#3a4555}
body.dark-mode .apartment-card h3{color:#9ec5e8}
body.dark-mode .apt-details{color:#888}
body.dark-mode .apt-details dt{color:#aaa}
body.dark-mode .apt-link{color:#5bbcd6}
body.dark-mode .house-cta{background:#2a3140}
body.dark-mode .house-cta p{color:#aaa}

/* ─────────────────────────────────────────────
 * V4 Belegungsplan-Calendar-Grid
 * Konsolidiert aus v4/.../belegungsplan.html inline-<style>
 * ───────────────────────────────────────────── */

/* Info-Box (Container für Legende) */
.info-box{background:#f0f6fa;border-radius:6px;padding:14px 18px;margin-bottom:20px;font-size:0.88em}

/* Hint-Box (für Hinweise unter Calendar) */
.hint-box{background:#f0f6fa;border-radius:6px;padding:14px 18px;font-size:0.85em;border-left:3px solid #2e86ab;margin-bottom:16px}
.hint-box strong{color:#1a3a5c}

/* CTA-Box (zum Buchen-Link unter Calendar) */
.cta-box{text-align:center;padding:16px;background:#f8fafb;border-radius:8px}

/* Legende (Frei/Belegt/An-Abreisetag) */
.legend{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.legend-item{display:flex;align-items:center;gap:6px}
.legend-dot{display:inline-block;width:16px;height:16px;border-radius:3px}
.legend-free{background:#c5f7d9}
.legend-busy{background:#f7c5c8}
.legend-mixed{background:linear-gradient(135deg,#c5f7d9 50%,#f7c5c8 50%)}

/* Calendar-Grid (4 Monate pro Reihe) */
.cal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.cal-month{background:#fff;border:1px solid #e8eef3;border-radius:6px;padding:10px;overflow:hidden}
.cal-month-name{font-weight:bold;color:#1a3a5c;text-align:center;padding:6px 0;margin-bottom:6px;border-bottom:1px solid #e8eef3;font-size:0.9em}
.cal-header{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:0.7em;font-weight:bold;color:#888;margin-bottom:2px}
.cal-week{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}
.cal-week span{padding:3px 2px;font-size:0.78em;margin:1px;border-radius:2px}
.cal-week .empty{visibility:hidden}

/* An-/Abreisetag-Gradients (Diagonal-Wechsel) */
.freibelegt{background-image:linear-gradient(135deg,#c5f7d9 50%,#f7c5c8 50%) !important}
.belegtfrei{background-image:linear-gradient(135deg,#f7c5c8 50%,#c5f7d9 50%) !important}

/* Responsive Calendar */
@media(max-width:1000px){.cal-grid{grid-template-columns:repeat(3,1fr);gap:12px}}
@media(max-width:750px){.cal-grid{grid-template-columns:repeat(2,1fr);gap:10px}}
@media(max-width:480px){
  .cal-grid{grid-template-columns:1fr}
  .cal-week span{font-size:0.7em;padding:2px 1px}
}

/* Dark Mode für Calendar */
body.dark-mode .info-box{background:#2a3140}
body.dark-mode .hint-box{background:#2a3140;border-color:#5bbcd6}
body.dark-mode .hint-box strong{color:#9ec5e8}
body.dark-mode .cta-box{background:#2a3140}
body.dark-mode .legend-free{background:#2a5a2a}
body.dark-mode .legend-busy{background:#6b2a2a}
body.dark-mode .legend-mixed{background:linear-gradient(135deg,#2a5a2a 50%,#6b2a2a 50%)}
body.dark-mode .cal-month{background:#2a3140;border-color:#3a4555}
body.dark-mode .cal-month-name{color:#9ec5e8;border-color:#3a4555}
body.dark-mode .cal-header{color:#777}
body.dark-mode .cal-week span{color:#bbb}
body.dark-mode .belegt{background-color:#6b2a2a !important;color:#eee !important}
body.dark-mode .frei{background-color:#2a5a2a !important;color:#eee !important}
body.dark-mode .freibelegt{background-image:linear-gradient(135deg,#2a5a2a 50%,#6b2a2a 50%) !important;color:#eee !important}
body.dark-mode .belegtfrei{background-image:linear-gradient(135deg,#6b2a2a 50%,#2a5a2a 50%) !important;color:#eee !important}

/* ─────────────────────────────────────────────
 * V4 Buchungs-Page: Booking-Info-Card + DSGVO-Hint
 * Konsolidiert aus v4/.../buchen.html inline-<style>
 * Form-Styling übernimmt TYPO3-Form-Framework selbst.
 * ───────────────────────────────────────────── */

/* Property-Info-Card oben auf /buchen */
.booking-info{background:#f0f6fa;border-radius:8px;padding:16px 20px;margin-bottom:24px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.booking-info-text{flex:1;min-width:200px}
.booking-info-text h3{margin-top:0;border:none;padding:0;font-size:1em;color:#1a3a5c}
.booking-info-text p{font-size:0.85em;color:#666;margin:0}
.booking-info .btn-outline{display:inline-block;padding:8px 16px;font-size:0.85em;font-weight:bold;color:#2e86ab;border:2px solid #2e86ab;border-radius:6px;text-decoration:none;transition:all 0.2s;white-space:nowrap}
.booking-info .btn-outline:hover{background:#2e86ab;color:#fff;text-decoration:none}

/* DSGVO-Hint vor der Form */
.form-hint{font-size:0.85em;color:#666;margin:16px 0;padding:10px 14px;background:#f0f6fa;border-radius:4px;border-left:3px solid #2e86ab}
.form-hint a{color:#2e86ab;font-weight:bold}

/* TYPO3-Form-Framework Standard-Styling tweaks (Bootstrap-Klassen vorhanden) */
.frame-type-form_formframework .form-group{margin-bottom:14px}
.frame-type-form_formframework .form-label{display:block;font-size:0.85em;color:#555;font-weight:bold;margin-bottom:4px}
.frame-type-form_formframework .form-control{width:100%;padding:9px 12px;border:1px solid #d0dfe8;border-radius:4px;font-family:inherit;font-size:0.9em;transition:border-color 0.2s;background:#fff}
.frame-type-form_formframework .form-control:focus{outline:none;border-color:#2e86ab;box-shadow:0 0 0 2px rgba(46,134,171,0.15)}
.frame-type-form_formframework textarea.form-control{resize:vertical;min-height:100px}
.frame-type-form_formframework .required{color:#cc0000;margin-left:2px}
.frame-type-form_formframework .row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:0}
.frame-type-form_formframework .row > div[class*="col-"]{padding:0}
.frame-type-form_formframework .form-check{display:flex;gap:10px;align-items:flex-start;font-size:0.85em;color:#555}
.frame-type-form_formframework .form-check input{margin-top:3px;flex-shrink:0}
.frame-type-form_formframework .form-navigation{text-align:center;margin-top:20px}
.frame-type-form_formframework .btn-primary{background:linear-gradient(135deg,#2e86ab,#1b6a8a);color:#fff;border:none;padding:12px 32px;border-radius:6px;font-size:1em;font-weight:bold;cursor:pointer;transition:background 0.3s,transform 0.2s;box-shadow:0 2px 8px rgba(46,134,171,0.3)}
.frame-type-form_formframework .btn-primary:hover{background:linear-gradient(135deg,#1b6a8a,#145a75);transform:translateY(-1px)}

@media(max-width:768px){
  .booking-info{flex-direction:column;padding:14px 16px;gap:12px}
  .frame-type-form_formframework .row{grid-template-columns:1fr}
}

/* Dark Mode */
body.dark-mode .booking-info{background:#2a3140}
body.dark-mode .booking-info-text h3{color:#9ec5e8}
body.dark-mode .booking-info-text p{color:#888}
body.dark-mode .booking-info .btn-outline{color:#5bbcd6;border-color:#5bbcd6}
body.dark-mode .booking-info .btn-outline:hover{background:#5bbcd6;color:#1a1f25}
body.dark-mode .form-hint{background:#2a3140;color:#aaa;border-color:#5bbcd6}
body.dark-mode .form-hint a{color:#5bbcd6}
body.dark-mode .frame-type-form_formframework .form-label{color:#aaa}
body.dark-mode .frame-type-form_formframework .form-control{background:#1a1f25;border-color:#3a4555;color:#ddd}
body.dark-mode .frame-type-form_formframework .form-control:focus{border-color:#5bbcd6;box-shadow:0 0 0 2px rgba(91,188,214,0.2)}
body.dark-mode .frame-type-form_formframework .form-check{color:#aaa}
body.dark-mode .frame-type-form_formframework .btn-primary{background:linear-gradient(135deg,#3a6a8a,#2a5a75)}

/* ─────────────────────────────────────────────
 * V4 Preisliste-Page: data-table + cost-grid
 * Konsolidiert aus v4/.../preisliste.html inline-<style>
 * ───────────────────────────────────────────── */

/* Data-Table (Saisonpreise) */
.data-table{width:100%;border-collapse:collapse;font-size:0.88em}
.data-table th{background:#f0f6fa;padding:10px 12px;text-align:left;color:#1a3a5c;border-bottom:2px solid #d0dfe8;width:30%}
.data-table td{padding:8px 12px;border-bottom:1px solid #eee;color:#555;width:30%}
.data-table tr:nth-child(even){background:#f8fafb}
.data-table .price{text-align:left;font-weight:bold;color:#2e86ab;width:70%}
.data-table .label{font-weight:bold;color:#1a3a5c}

/* Cost-Grid (Zusatzkosten — 2-Spalten: Label | Wert) */
.cost-grid{display:grid;grid-template-columns:max-content max-content;gap:6px 12px;font-size:0.88em;margin-bottom:20px;color:#555;align-items:baseline}
.cost-grid .val{font-weight:bold;color:#2e86ab;white-space:nowrap}

/* Mobile */
@media(max-width:600px){
  .data-table td,.data-table th{width:50% !important;padding:6px 8px}
  .cost-grid{gap:4px 10px;font-size:0.82em}
}

/* Dark Mode */
body.dark-mode .data-table th{background:#2a3140;color:#9ec5e8;border-color:#3a4555}
body.dark-mode .data-table td{border-color:#3a4555;color:#aaa}
body.dark-mode .data-table tr:nth-child(even){background:#262e38}
body.dark-mode .data-table .price{color:#5bbcd6}
body.dark-mode .data-table .label{color:#9ec5e8}
body.dark-mode .cost-grid{color:#aaa}
body.dark-mode .cost-grid .val{color:#5bbcd6}

/* ─────────────────────────────────────────────
 * Room-Gallery: Bild-Grid oberhalb der Raum-Beschreibung
 * ───────────────────────────────────────────── */
.room-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-bottom:24px}
.room-gallery img{width:100%;height:180px;object-fit:cover;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.1);cursor:pointer;transition:transform 0.2s,box-shadow 0.2s}
.room-gallery img:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.18)}
@media(max-width:600px){
  .room-gallery{grid-template-columns:repeat(2,1fr);gap:6px}
  .room-gallery img{height:120px}
}
body.dark-mode .room-gallery img{box-shadow:0 2px 8px rgba(0,0,0,0.3)}