<style>
    :root{
      --nav-height:64px;
      --accent:#0a6ea8; /* maritime blau */
      --muted:#f4f7f9;
      --glass: rgba(255,255,255,0.06);
    }
    *{box-sizing:border-box}
    body,html{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;color:#06202b}

    /* Hintergrund-Hero */
    .hero {
  min-height: 100vh;
  background-image: url("/new_sueno/images/ostsee-bg.jpg");
  background-size: cover;
  background-position: center bottom;
  background-attachment: fixed; /* ✅ Bild bleibt beim Scrollen stehen */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-top: var(--nav-height);
  overflow: hidden;
}

    .hero::after{ /* leichte wellen-überlagerung */
      content:"";
      position:absolute;inset:0;
      background:linear-gradient(to bottom, rgba(4,18,30,0.25), rgba(4,18,30,0.35));
      pointer-events:none;
    }

    header{position:fixed;top:0;left:0;right:0;height:var(--nav-height);display:flex;align-items:center;justify-content:space-between;padding:0 1rem;z-index:60;backdrop-filter: blur(6px);background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02));}
    .brand{display:flex;align-items:center;gap:.6rem}
    .brand .logo{width:44px;height:44px;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),#083a59);color:white;font-weight:700}
    nav{display:flex;gap:1rem;align-items:center}
    nav a{color:white;text-decoration:none;padding:.5rem .6rem;border-radius:6px;font-weight:600}
    nav a:hover{background:rgba(255,255,255,0.06)}

    /* Mobile menu */
    .hamburger{display:none;cursor:pointer}
    @media(max-width:900px){
      nav{display:none}
      .hamburger{display:block}
      .mobile-nav{position:fixed;top:var(--nav-height);right:0;background:rgba(6,32,42,0.98);width:220px;padding:1rem;border-left:1px solid rgba(255,255,255,0.03);transform:translateX(100%);transition:transform .28s ease-in-out;z-index:70}
      .mobile-nav.open{transform:translateX(0)}
      .mobile-nav a{display:block;color:white;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,0.03)}
    }

    .hero-content{position:relative;z-index:50;max-width:1100px;width:100%;padding:2rem;display:flex;gap:2rem;align-items:center}
    .card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      padding:1.6rem;border-radius:14px;
      backdrop-filter: blur(8px);box-shadow:0 8px 30px rgba(4,20,30,0.45);
      color: #021621;
    }
    .headline{font-size:clamp(1.25rem,3.5vw,2.2rem);margin:0 0 .4rem}
    .sub{opacity:0.92;margin:0 0 1rem}
    .cta{display:inline-flex;gap:.6rem;align-items:center;padding:.65rem 1rem;border-radius:10px;background:var(--accent);color:white;text-decoration:none;font-weight:700}
    .ghost{background:transparent;border:1px solid rgba(255,255,255,0.12)}

    /* Details-Section */
    main{padding:2rem 1rem;background:white}
    .container{max-width:1100px;margin:0 auto}
    .details{display:grid;grid-template-columns:1fr 360px;gap:1.25rem;align-items:start}
    @media(max-width:900px){.details{grid-template-columns:1fr}}
    .specs{background:white;padding:1.2rem;border-radius:12px;box-shadow:0 6px 18px rgba(6,20,30,0.06)}
    .specs table{width:100%;border-collapse:collapse}
    .specs th{text-align:left;padding:.6rem 0;color:#084055;font-weight:700}
    .specs td{padding:.6rem 0;color:#234e5f}

    .summary{background:linear-gradient(180deg,#f8fbfd,#eef6fb);padding:1rem;border-radius:12px}

    /* Compass (SVG) */
    .compass{position:absolute;
        top: 50%;
        left: 50%;
        width: 700px;
        height:700px;
        opacity:.22;
        transform: translate(-50%, -50%);
        pointer-events:none;
        z-index:15
      animation: rotateCompass 120s linear infinite; /* ⚓ langsame Rotation */
      }
      /* Animation: sanfte Rotation */
@keyframes rotateCompass {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
    @media(max-width:900px){.compass{width:500px;
        height:500px;
         animation-duration: 90s; /* etwas schneller für kleinere Displays */
        

    /* Footer */
    footer{padding:2rem 1rem;background:#042028;color:#bfe9ff}
    .flex{display:flex;gap:1rem;align-items:center}

    /* Gallery thumbnail grid used on gallery.html (small helper) */
    .thumb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}

    /* Modal for images */
    .modal{position:fixed;inset:0;background:rgba(2,6,10,0.8);display:flex;align-items:center;justify-content:center;padding:1rem;z-index:120;visibility:hidden;opacity:0;transition:opacity .2s,visibility .2s}
    .modal.open{visibility:visible;opacity:1}
    .modal img{max-width:95%;max-height:90%;border-radius:8px}

  </style>