/* Ostsee-Refresh 11.09.2026
   Zusatz-CSS nach dem bestehenden Stylesheet.
   Inhalte, Bilder, Entfernungen, Preise, Bewertungen und Funktionen bleiben unverändert. */

:root{
  --ink:#20313A;
  --sea:#0E5A75;
  --sea-dark:#083E52;
  --water:#DCEFF3;
  --sand:#F5E9D6;
  --paper:#FFFDF9;
  --line:#C9DDE3;
  --muted:#58717B;
  --accent:#D46A4C;
  --accent-hover:#AE4D35;
  --radius:20px;
  --shadow:0 16px 42px rgba(8,62,82,.11);
}

body{
  color:var(--ink);
  background:linear-gradient(180deg,#fff 0%,#f7fbfc 48%,#fff 100%);
}

.topbar{
  background:rgba(255,255,255,.95);
  border-bottom-color:rgba(8,62,82,.12);
}
.brand-mark{background:var(--sea-dark)}
.topbar nav a:hover{color:var(--sea)}
.nav-cta{
  background:var(--accent);
  color:#fff!important;
  min-height:44px;
  padding-inline:19px;
}
.nav-cta:hover{background:var(--accent-hover)}

.hero{
  box-shadow:0 22px 58px rgba(8,62,82,.16);
}
.hero-shade{
  background:linear-gradient(90deg,rgba(8,62,82,.88) 0%,rgba(8,62,82,.60) 42%,rgba(8,62,82,.12) 78%);
}
.hero-content{max-width:1080px}
.hero h1{max-width:760px}
.hero-subline{
  margin:12px 0 0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(25px,3.1vw,42px);
  line-height:1.08;
  font-weight:500;
  letter-spacing:-.025em;
  color:#fff;
}
.hero-copy{margin-top:24px}
.hero-facts span{
  background:rgba(8,62,82,.40);
  border-color:rgba(255,255,255,.42);
}
.button.primary{
  background:var(--accent);
  color:#fff;
  box-shadow:0 8px 22px rgba(174,77,53,.18);
}
.button.primary:hover{
  background:var(--accent-hover);
  box-shadow:0 10px 26px rgba(174,77,53,.25);
}
.button.glass:hover{background:rgba(255,255,255,.18)}

.quickfacts-heading{
  margin-top:34px;
  margin-bottom:12px;
}
.quickfacts-heading .eyebrow{
  margin:0;
  color:var(--sea);
}
.quickfacts{
  margin-top:0;
  background:#fff;
  border-color:var(--line);
  box-shadow:var(--shadow);
}
.quickfacts article{border-color:var(--line)}
.quickfacts span{color:var(--sea-dark)}

.intro,.reviews,.pricing{background:transparent}
.intro-copy{color:var(--muted)}
.summer-freshness,
.amenities-section,
.seo-soft-section{background:var(--sand)}
.winter-freshness{background:var(--water)}
.nearby-section,
.events-section{
  background:linear-gradient(180deg,var(--water) 0%,#f6fbfc 100%);
}

.amenity-list article{border-bottom-color:rgba(8,62,82,.18)}
.amenity-list article>span,
.rating-label,
.detail-facts-grid strong,
.price-note,
.terms-note{color:var(--sea)}

.rating-source,
.detail-facts-grid article,
.price-cards article:not(.featured),
.booking-form,
.booking-terms details{
  background:#fff;
  border-color:var(--line);
  box-shadow:0 9px 26px rgba(8,62,82,.06);
}
.review-grid blockquote{background:var(--sand)}
.rating-big span{color:var(--accent)}
.price-cards article.featured,
.booking{background:var(--sea-dark);border-color:var(--sea-dark)}

.booking{
  background:linear-gradient(135deg,var(--sea-dark),var(--sea) 70%,#0B4D63);
}
.booking-form input,
.booking-form select,
.booking-form textarea{
  border-color:#BED2D8;
  min-height:46px;
}
.booking-form textarea{min-height:130px}
.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus{
  outline:3px solid rgba(212,106,76,.20);
  border-color:var(--accent);
}

footer{background:#062F3E}
.text-link{color:var(--sea-dark)}
.booking .text-link,footer .text-link{color:inherit}

/* Mobil zuerst: einspaltig, große Touch-Flächen, nichts hinter dem Sticky-CTA. */
@media(max-width:767px){
  body{padding-bottom:88px}
  .wrap{width:min(100% - 28px,1160px)}
  .hero{min-height:660px}
  .hero-content{
    transform:none;
    justify-content:flex-end;
    padding-top:24px;
    padding-bottom:42px;
  }
  .hero h1{font-size:clamp(42px,12vw,58px)}
  .hero-subline{font-size:clamp(24px,7.2vw,33px);margin-top:9px}
  .hero-copy{font-size:16px;line-height:1.48;margin:17px 0 14px}
  .hero-actions{display:grid;grid-template-columns:1fr;width:100%}
  .hero-actions .button{width:100%;min-height:48px}
  .button,.nav-cta,.menu-button{min-height:44px}

  .quickfacts-heading{margin-top:24px}
  .quickfacts{
    grid-template-columns:1fr;
    width:min(100% - 28px,1160px);
    border:1px solid var(--line);
    border-radius:16px;
    overflow:hidden;
  }
  .quickfacts article{
    border-right:0!important;
    border-bottom:1px solid var(--line)!important;
    padding:18px 20px;
  }
  .quickfacts article:last-child{border-bottom:0!important}

  .intro,.amenities-layout,.booking-layout,.pricing-intro,
  .review-grid,.rating-sources,.price-cards,
  .events-heading,.event-grid,.nearby-grid,
  .detail-facts-grid,.seo-card-grid,
  .seo-contact-grid,.seo-contact-location,
  .seo-two-col,.seo-location-feature{
    grid-template-columns:1fr!important;
  }

  .mobile-cta{
    display:block!important;
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:9999!important;
    padding:9px 12px calc(9px + env(safe-area-inset-bottom))!important;
    background:rgba(255,255,255,.97)!important;
    border-top:1px solid var(--line)!important;
    box-shadow:0 -8px 24px rgba(8,62,82,.10);
  }
  .mobile-cta a{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    width:100%;
    background:var(--accent)!important;
    color:#fff!important;
    border-radius:999px;
    text-decoration:none;
    font-weight:850;
    font-size:14px;
  }
  .mobile-cta a:hover{background:var(--accent-hover)!important}
}

/* Tablet/Desktop: Vorteile zunächst zweispaltig. */
@media(min-width:768px) and (max-width:1179px){
  .quickfacts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quickfacts article:nth-child(2){border-right:0}
  .quickfacts article:nth-child(-n+2){border-bottom:1px solid var(--line)}
}

/* Breiter Desktop: vier Vorteile nebeneinander. */
@media(min-width:1180px){
  .quickfacts{grid-template-columns:repeat(4,minmax(0,1fr))}
}