:root {
  --ost-tiefsee: #0A2E3A;
  --ost-kueste: #0F3D4C;
  --ost-blau: #1A5F73;
  --ost-lagune: #2A7A8C;
  --ost-schaum: #8EC5C0;
  --ost-kreide: #F6F1E8;
  --ost-sand: #E8DCC6;
  --ost-bernstein: #C8863A;
  --ost-moos: #5F7348;
  --ost-holz: #4A3428;
  --ost-ink: #1C2A2E;
}

/* Grundfläche: weg vom reinen Weiß */
body,
.body-innerwrapper,
#sp-main-body {
  background-color: var(--ost-kreide) !important;
  color: var(--ost-ink);
}

a { color: var(--ost-blau); }
a:hover,
a:focus { color: var(--ost-bernstein); }

/* Header: Tiefsee, damit das Haus darunter atmen kann */
#sp-header,
#sp-header.header-sticky {
  background: rgba(10, 46, 58, 0.92) !important;
  border-bottom: 1px solid rgba(142, 197, 192, 0.25);
}
#sp-header .logo a,
#sp-header .sp-megamenu-parent > li > a,
#sp-header .sp-megamenu-parent > li > span {
  color: var(--ost-kreide) !important;
}
#sp-header .sp-megamenu-parent > li > a:hover,
#sp-header .sp-megamenu-parent > li.active > a {
  color: var(--ost-schaum) !important;
}
.burger-icon > span { background-color: var(--ost-kreide) !important; }

/* Startseite: Haus bleibt, Lesbarkeit kommt vom Overlay */
.home-hero,
#sp-page-title,
.ostsee-hero {
  position: relative;
  background-image: url("/images/Haus-vorne.JPG");
  background-size: cover;
  background-position: center 40%;
  min-height: 62vh;
}
.ostsee-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,46,58,0.55) 0%, rgba(10,46,58,0.28) 42%, rgba(246,241,232,0.92) 100%);
}
.ostsee-hero .hero-inner {
  position: relative;
  z-index: 1;
  color: var(--ost-kreide);
}

/* Module & Karten */
.sp-module {
  background: #fffdf8;
  border: 1px solid rgba(26, 95, 115, 0.12);
  border-radius: 14px;
  padding: 1.25rem 1.35rem;
  box-shadow: 0 10px 30px -22px rgba(10, 46, 58, 0.55);
}
.sp-module .sp-module-title {
  color: var(--ost-tiefsee);
  border-bottom: 2px solid var(--ost-schaum);
  padding-bottom: 0.4rem;
}

/* Buttons / CTAs */
.btn,
.btn-primary,
.sppb-btn-primary,
button.btn {
  background: var(--ost-blau) !important;
  border-color: var(--ost-blau) !important;
  color: #fff !important;
  border-radius: 999px !important;
}
.btn:hover,
.btn-primary:hover,
.sppb-btn-primary:hover {
  background: var(--ost-bernstein) !important;
  border-color: var(--ost-bernstein) !important;
}

/* Footer */
#sp-footer,
#sp-bottom {
  background: var(--ost-tiefsee) !important;
  color: var(--ost-sand) !important;
}
#sp-footer a { color: var(--ost-schaum); }

/* Offcanvas */
.offcanvas-menu { background-color: var(--ost-tiefsee) !important; }
.offcanvas-menu .offcanvas-inner ul.menu > li > a,
.offcanvas-menu .offcanvas-inner ul.menu > li > span {
  color: var(--ost-kreide);
}

/* Weniger Leerraum unter dem Header */
#sp-main-body { padding-top: 28px; }
.com-content #sp-main-body { padding: 28px 0 64px; }