company tourism portal travel german regional ostsee vacation playful
Company Tourism Portal
Regional German tourism portal with accommodation search, activity highlights, event calendar, and travel information — inviting and practical.
playful Responsive Vanilla JS
Live Preview
Sections
navbarherohighlightsaccommodationactivitieseventstravel-infonewsletterfooter
Patterns used
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Discover the Baltic — Holiday on the German Baltic Coast</title>
<meta name="description" content="Discover the most beautiful beaches, Hanseatic cities, and nature parks on the Baltic Sea. Accommodation, activities, and events for your perfect holiday." />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://webspire.de/webspire-tokens.css">
<link rel="stylesheet" href="https://webspire.de/webspire-components.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
body { font-family: 'Inter', sans-serif; }
/* Brand tokens — Baltic tourism: sky blue, warm amber */
:root {
--ws-color-accent: oklch(0.62 0.17 220); /* sky-500 */
--ws-color-accent-hover: oklch(0.55 0.17 220); /* sky-600 */
--ws-color-accent-subtle: oklch(0.96 0.04 220);/* sky-50 */
--ws-color-surface: oklch(1 0 0);
--ws-color-surface-alt: oklch(0.97 0.02 220); /* sky-50/50 */
--ws-color-text: oklch(0.22 0.02 220); /* neutral-800 */
--ws-color-text-muted: oklch(0.52 0.02 220); /* neutral-500 */
}
/* hover-lift snippet — used via .card-float */
.hover-lift,
.card-float {
--lift-distance: -4px;
--lift-shadow: 0 20px 40px -12px oklch(0 0 0 / 0.12);
--lift-duration: 0.3s;
transition:
transform var(--lift-duration) ease,
box-shadow var(--lift-duration) ease;
}
.hover-lift:hover,
.card-float:hover {
transform: translateY(var(--lift-distance));
box-shadow: var(--lift-shadow);
}
@media (prefers-reduced-motion: reduce) {
.hover-lift, .card-float { transition: none; }
}
/* Template-specific helpers */
.wave-border { position: relative; }
.wave-border::after {
content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, #0ea5e9, #38bdf8, #0ea5e9);
border-radius: 2px; transform: scaleX(0); transition: transform 0.3s ease;
}
.wave-border:hover::after { transform: scaleX(1); }
.activity-pill { transition: background-color 0.2s ease, transform 0.2s ease; }
.activity-pill:hover { transform: scale(1.05); }
.scroll-row { scrollbar-width: none; }
.scroll-row::-webkit-scrollbar { display: none; }
</style>
</head>
<body class="bg-white text-neutral-800 antialiased">
<!-- Navbar -->
<nav class="ws-navbar fixed top-0 inset-x-0 z-50 bg-white/95 backdrop-blur-md border-b border-sky-100/60" aria-label="Main navigation">
<div class="max-w-7xl mx-auto flex items-center justify-between px-6 py-4">
<a href="#" class="flex items-center gap-2 text-xl font-bold tracking-tight text-sky-700">
<svg class="w-7 h-7 text-sky-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M2 12c1.5-2 3.5-3 6-3s4.5 1.5 6 3c1.5-2 3.5-3 6-3v2c-2 0-3.8.8-5 2.2C13.8 11.8 12 11 10 11s-3.8.8-5 2.2V11c0-1 .3-1.8 1-2.5C4.5 10 3.2 10.8 2 12z"/>
<path d="M2 17c1.5-2 3.5-3 6-3s4.5 1.5 6 3c1.5-2 3.5-3 6-3v2c-2 0-3.8.8-5 2.2C13.8 16.8 12 16 10 16s-3.8.8-5 2.2V16c0-1 .3-1.8 1-2.5C4.5 15 3.2 15.8 2 17z"/>
</svg>
Discover the<span class="text-amber-500"> Baltic</span>
</a>
<ul class="hidden md:flex items-center gap-7 text-sm font-medium text-neutral-500">
<li><a href="#highlights" class="wave-border pb-1 hover:text-sky-600 transition-colors">Discover</a></li>
<li><a href="#unterkuenfte" class="wave-border pb-1 hover:text-sky-600 transition-colors">Accommodation</a></li>
<li><a href="#aktivitaeten" class="wave-border pb-1 hover:text-sky-600 transition-colors">Activities</a></li>
<li><a href="#events" class="wave-border pb-1 hover:text-sky-600 transition-colors">Events</a></li>
<li><a href="#anreise" class="wave-border pb-1 hover:text-sky-600 transition-colors">Getting Here</a></li>
</ul>
<div class="hidden md:flex items-center gap-3">
<button class="p-2 text-neutral-400 hover:text-sky-600 transition-colors" aria-label="Open search">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z"/>
</svg>
</button>
<a href="#unterkuenfte" class="bg-sky-500 text-white text-sm font-semibold px-5 py-2.5 rounded-full hover:bg-sky-600 transition-colors">
Plan Your Trip
</a>
</div>
<button id="menu-toggle" class="md:hidden p-2 -mr-2" aria-label="Open menu" aria-expanded="false" aria-controls="mobile-menu">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
<div id="mobile-menu" class="hidden md:hidden border-t border-sky-100 bg-white px-6 pb-6 pt-4">
<ul class="flex flex-col gap-3 text-base font-medium text-neutral-700">
<li><a href="#highlights" class="block py-1.5">Discover</a></li>
<li><a href="#unterkuenfte" class="block py-1.5">Accommodation</a></li>
<li><a href="#aktivitaeten" class="block py-1.5">Activities</a></li>
<li><a href="#events" class="block py-1.5">Events</a></li>
<li><a href="#anreise" class="block py-1.5">Getting Here</a></li>
</ul>
<a href="#unterkuenfte" class="mt-4 block text-center bg-sky-500 text-white text-sm font-semibold px-5 py-2.5 rounded-full">
Plan Your Trip
</a>
</div>
</nav>
<!-- Hero -->
<header class="ws-hero relative min-h-[90vh] flex items-center justify-center overflow-hidden pt-16">
<div class="absolute inset-0 bg-gradient-to-br from-sky-500 via-sky-400 to-amber-300"></div>
<div class="absolute inset-0 bg-gradient-to-t from-sky-900/20 to-transparent"></div>
<!-- Decorative wave shapes -->
<div class="absolute bottom-0 left-0 right-0">
<svg viewBox="0 0 1440 120" class="w-full text-white" fill="currentColor" aria-hidden="true">
<path d="M0,64 C360,120 720,0 1080,64 C1260,96 1380,80 1440,64 L1440,120 L0,120 Z" opacity="0.6"/>
<path d="M0,80 C240,40 480,100 720,80 C960,60 1200,100 1440,80 L1440,120 L0,120 Z"/>
</svg>
</div>
<div class="relative z-10 text-center px-6 max-w-4xl mx-auto">
<p class="text-sky-100 text-sm font-semibold tracking-widest uppercase mb-4">Mecklenburg-Vorpommern</p>
<h1 class="text-5xl sm:text-6xl lg:text-7xl font-extrabold text-white mb-6 leading-tight">
The Baltic is Calling.
</h1>
<p class="text-xl sm:text-2xl text-white/90 font-light max-w-2xl mx-auto mb-10 leading-relaxed">
Endless beaches, maritime Hanseatic cities, and untouched nature — discover Germany's most beautiful coastline.
</p>
<a href="#highlights" class="inline-flex items-center gap-2 bg-white text-sky-700 font-bold text-lg px-8 py-4 rounded-full hover:bg-sky-50 transition-colors shadow-lg shadow-sky-900/20">
Explore the Region
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
</svg>
</a>
<!-- Search bar -->
<div class="mt-10 max-w-xl mx-auto">
<div class="bg-white/95 backdrop-blur-sm rounded-2xl shadow-xl shadow-sky-900/10 p-2 flex items-center gap-2">
<svg class="w-5 h-5 text-neutral-400 ml-3 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z"/>
</svg>
<input type="search" placeholder="What would you like to experience?" class="flex-1 text-neutral-700 placeholder-neutral-400 bg-transparent border-none outline-none py-2.5 px-2 text-base" aria-label="Search experiences" />
<button class="bg-sky-500 text-white font-semibold px-6 py-2.5 rounded-xl hover:bg-sky-600 transition-colors text-sm">
Search
</button>
</div>
</div>
</div>
</header>
<!-- Highlights -->
<section id="highlights" class="ws-features py-20 sm:py-28 px-6">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-14">
<h2 class="text-3xl sm:text-4xl font-bold text-neutral-900 mb-4">Discover the Baltic</h2>
<p class="text-lg text-neutral-500 max-w-2xl mx-auto">Four ways to experience the coast — from white sandy beaches to historic old towns.</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Beach Holiday -->
<article class="card-float group rounded-2xl overflow-hidden bg-white border border-neutral-100 shadow-sm">
<div class="h-52 bg-gradient-to-br from-sky-400 to-sky-300 flex items-end p-5">
<svg class="w-10 h-10 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 3v1m0 16v1m8.66-13.66l-.71.71M4.05 19.95l-.71.71M21 12h-1M4 12H3m16.66 7.66l-.71-.71M4.05 4.05l-.71-.71M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
</svg>
</div>
<div class="p-5">
<h3 class="text-lg font-bold text-neutral-900 mb-2">Beach Holiday</h3>
<p class="text-sm text-neutral-500 mb-3 leading-relaxed">Fine sand, beach chairs, and crystal-clear water — over 2,000 km of coastline await you.</p>
<a href="#" class="text-sky-600 text-sm font-semibold hover:text-sky-700 transition-colors inline-flex items-center gap-1">
Learn more
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
</a>
</div>
</article>
<!-- Cycling Trails -->
<article class="card-float group rounded-2xl overflow-hidden bg-white border border-neutral-100 shadow-sm">
<div class="h-52 bg-gradient-to-br from-emerald-500 to-emerald-400 flex items-end p-5">
<svg class="w-10 h-10 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
</svg>
</div>
<div class="p-5">
<h3 class="text-lg font-bold text-neutral-900 mb-2">Cycling Trails</h3>
<p class="text-sm text-neutral-500 mb-3 leading-relaxed">The Baltic Coast Cycle Route leads through dune landscapes, fishing villages, and beech forests.</p>
<a href="#" class="text-sky-600 text-sm font-semibold hover:text-sky-700 transition-colors inline-flex items-center gap-1">
Learn more
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
</a>
</div>
</article>
<!-- Hanseatic Cities -->
<article class="card-float group rounded-2xl overflow-hidden bg-white border border-neutral-100 shadow-sm">
<div class="h-52 bg-gradient-to-br from-amber-400 to-amber-300 flex items-end p-5">
<svg class="w-10 h-10 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0H5m14 0h2m-16 0H3m4-8h2m4 0h2m-8 4h2m4 0h2"/>
</svg>
</div>
<div class="p-5">
<h3 class="text-lg font-bold text-neutral-900 mb-2">Hanseatic Cities</h3>
<p class="text-sm text-neutral-500 mb-3 leading-relaxed">Rostock, Stralsund, Wismar — UNESCO World Heritage, Brick Gothic architecture, and maritime flair.</p>
<a href="#" class="text-sky-600 text-sm font-semibold hover:text-sky-700 transition-colors inline-flex items-center gap-1">
Learn more
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
</a>
</div>
</article>
<!-- Nature Parks -->
<article class="card-float group rounded-2xl overflow-hidden bg-white border border-neutral-100 shadow-sm">
<div class="h-52 bg-gradient-to-br from-orange-400 to-rose-400 flex items-end p-5">
<svg class="w-10 h-10 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 3l7 4 7-4v11l-7 4-7-4V3zm7 4v15"/>
</svg>
</div>
<div class="p-5">
<h3 class="text-lg font-bold text-neutral-900 mb-2">Nature Parks</h3>
<p class="text-sm text-neutral-500 mb-3 leading-relaxed">Jasmund, Darß, and Bodden Landscape — unique nature between chalk cliffs and reed beds.</p>
<a href="#" class="text-sky-600 text-sm font-semibold hover:text-sky-700 transition-colors inline-flex items-center gap-1">
Learn more
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
</a>
</div>
</article>
</div>
</div>
</section>
<!-- Accommodation -->
<section id="unterkuenfte" class="ws-cards py-20 sm:py-28 px-6 bg-sky-50/50">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-14">
<h2 class="text-3xl sm:text-4xl font-bold text-neutral-900 mb-4">Accommodation on the Baltic</h2>
<p class="text-lg text-neutral-500 max-w-2xl mx-auto">From beach hotels to campsites — find your perfect accommodation right by the sea.</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Hotel -->
<article class="card-float bg-white rounded-2xl overflow-hidden shadow-sm border border-neutral-100">
<div class="h-52 bg-gradient-to-br from-sky-200 to-sky-100 flex items-center justify-center">
<svg class="w-16 h-16 text-sky-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0H5m14 0h2m-16 0H3m4-8h2m4 0h2m-8 4h2m4 0h2"/>
</svg>
</div>
<div class="p-6">
<div class="flex items-start justify-between mb-2">
<div>
<h3 class="text-lg font-bold text-neutral-900">Strandhotel Kühlungsborn</h3>
<p class="text-sm text-neutral-400">Kühlungsborn, Mecklenburg</p>
</div>
<div class="flex items-center gap-0.5 text-amber-400" aria-label="4 out of 5 stars">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 text-neutral-200" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
</div>
<p class="text-sm text-neutral-500 mb-4">Direct beachfront location with sea views, spa area, and regional cuisine.</p>
<div class="flex items-center justify-between">
<p class="text-lg font-bold text-neutral-900">from <span class="text-sky-600">€129</span><span class="text-sm font-normal text-neutral-400">/night</span></p>
<a href="#" class="bg-sky-500 text-white text-sm font-semibold px-4 py-2 rounded-xl hover:bg-sky-600 transition-colors">Check Availability</a>
</div>
</div>
</article>
<!-- Holiday Apartment -->
<article class="card-float bg-white rounded-2xl overflow-hidden shadow-sm border border-neutral-100">
<div class="h-52 bg-gradient-to-br from-amber-100 to-orange-100 flex items-center justify-center">
<svg class="w-16 h-16 text-amber-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
</svg>
</div>
<div class="p-6">
<div class="flex items-start justify-between mb-2">
<div>
<h3 class="text-lg font-bold text-neutral-900">Holiday Apartment Seeblick</h3>
<p class="text-sm text-neutral-400">Binz, Rügen</p>
</div>
<div class="flex items-center gap-0.5 text-amber-400" aria-label="5 out of 5 stars">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
</div>
<p class="text-sm text-neutral-500 mb-4">Spacious apartment with balcony, fully equipped kitchen, and close to the beach.</p>
<div class="flex items-center justify-between">
<p class="text-lg font-bold text-neutral-900">from <span class="text-sky-600">€89</span><span class="text-sm font-normal text-neutral-400">/night</span></p>
<a href="#" class="bg-sky-500 text-white text-sm font-semibold px-4 py-2 rounded-xl hover:bg-sky-600 transition-colors">Check Availability</a>
</div>
</div>
</article>
<!-- Camping -->
<article class="card-float bg-white rounded-2xl overflow-hidden shadow-sm border border-neutral-100">
<div class="h-52 bg-gradient-to-br from-emerald-100 to-teal-100 flex items-center justify-center">
<svg class="w-16 h-16 text-emerald-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M3 21h18M12 3l8 18H4L12 3z"/>
</svg>
</div>
<div class="p-6">
<div class="flex items-start justify-between mb-2">
<div>
<h3 class="text-lg font-bold text-neutral-900">Camping Ostseeblick</h3>
<p class="text-sm text-neutral-400">Prerow, Fischland-Darß</p>
</div>
<div class="flex items-center gap-0.5 text-amber-400" aria-label="4 out of 5 stars">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 text-neutral-200" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
</div>
<p class="text-sm text-neutral-500 mb-4">Nature-close campsite with dune pitches, sanitary building, and beach access.</p>
<div class="flex items-center justify-between">
<p class="text-lg font-bold text-neutral-900">from <span class="text-sky-600">€25</span><span class="text-sm font-normal text-neutral-400">/night</span></p>
<a href="#" class="bg-sky-500 text-white text-sm font-semibold px-4 py-2 rounded-xl hover:bg-sky-600 transition-colors">Check Availability</a>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- Activities -->
<section id="aktivitaeten" class="ws-features py-20 sm:py-28 px-6">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-14">
<h2 class="text-3xl sm:text-4xl font-bold text-neutral-900 mb-4">Activities & Experiences</h2>
<p class="text-lg text-neutral-500 max-w-2xl mx-auto">The Baltic offers more than just the beach — discover your next adventure.</p>
</div>
<div class="flex flex-wrap justify-center gap-4">
<a href="#" class="activity-pill inline-flex items-center gap-3 bg-sky-50 hover:bg-sky-100 text-sky-700 font-semibold px-6 py-4 rounded-2xl border border-sky-100">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 3l7 18L15 10l9-3-18-4z"/></svg>
Sailing
</a>
<a href="#" class="activity-pill inline-flex items-center gap-3 bg-emerald-50 hover:bg-emerald-100 text-emerald-700 font-semibold px-6 py-4 rounded-2xl border border-emerald-100">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
Hiking
</a>
<a href="#" class="activity-pill inline-flex items-center gap-3 bg-amber-50 hover:bg-amber-100 text-amber-700 font-semibold px-6 py-4 rounded-2xl border border-amber-100">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8v8m0-8V6m0 8v2"/></svg>
Cycling
</a>
<a href="#" class="activity-pill inline-flex items-center gap-3 bg-teal-50 hover:bg-teal-100 text-teal-700 font-semibold px-6 py-4 rounded-2xl border border-teal-100">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999A5.002 5.002 0 0012 4a5 5 0 00-4.9 4.1A4 4 0 003 15z"/></svg>
Canoeing
</a>
<a href="#" class="activity-pill inline-flex items-center gap-3 bg-rose-50 hover:bg-rose-100 text-rose-700 font-semibold px-6 py-4 rounded-2xl border border-rose-100">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
Wellness
</a>
<a href="#" class="activity-pill inline-flex items-center gap-3 bg-violet-50 hover:bg-violet-100 text-violet-700 font-semibold px-6 py-4 rounded-2xl border border-violet-100">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
Culture
</a>
</div>
</div>
</section>
<!-- Events -->
<section id="events" class="ws-blog py-20 sm:py-28 px-6 bg-gradient-to-br from-sky-50 to-amber-50/30">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-14">
<h2 class="text-3xl sm:text-4xl font-bold text-neutral-900 mb-4">Events & Festivals</h2>
<p class="text-lg text-neutral-500 max-w-2xl mx-auto">Maritime flair, music, and traditions — experience the Baltic all year round.</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Hanse Sail -->
<article class="card-float bg-white rounded-2xl overflow-hidden shadow-sm border border-neutral-100">
<div class="p-6">
<div class="flex items-start gap-4">
<div class="bg-sky-500 text-white rounded-xl px-3 py-2 text-center min-w-[60px] shrink-0">
<p class="text-2xl font-bold leading-none">8</p>
<p class="text-xs font-semibold uppercase tracking-wide mt-0.5">Aug</p>
</div>
<div>
<h3 class="text-lg font-bold text-neutral-900 mb-1">Hanse Sail Rostock</h3>
<p class="text-sm text-neutral-400 mb-2">Stadthafen Rostock</p>
<p class="text-sm text-neutral-500 leading-relaxed">One of the world's largest maritime festivals. Hundreds of traditional sailing ships, live music, and fireworks at the harbor.</p>
<p class="text-xs text-sky-600 font-semibold mt-3">August 8 – 11, 2026</p>
</div>
</div>
</div>
</article>
<!-- Usedom Music Festival -->
<article class="card-float bg-white rounded-2xl overflow-hidden shadow-sm border border-neutral-100">
<div class="p-6">
<div class="flex items-start gap-4">
<div class="bg-amber-500 text-white rounded-xl px-3 py-2 text-center min-w-[60px] shrink-0">
<p class="text-2xl font-bold leading-none">19</p>
<p class="text-xs font-semibold uppercase tracking-wide mt-0.5">Sep</p>
</div>
<div>
<h3 class="text-lg font-bold text-neutral-900 mb-1">Usedom Music Festival</h3>
<p class="text-sm text-neutral-400 mb-2">Various venues, Usedom</p>
<p class="text-sm text-neutral-500 leading-relaxed">Chamber music and orchestral concerts in historic churches, castles, and the Baltic Philharmonic.</p>
<p class="text-xs text-amber-600 font-semibold mt-3">September 19 – October 10, 2026</p>
</div>
</div>
</div>
</article>
<!-- Fisherman's Festival -->
<article class="card-float bg-white rounded-2xl overflow-hidden shadow-sm border border-neutral-100">
<div class="p-6">
<div class="flex items-start gap-4">
<div class="bg-emerald-500 text-white rounded-xl px-3 py-2 text-center min-w-[60px] shrink-0">
<p class="text-2xl font-bold leading-none">4</p>
<p class="text-xs font-semibold uppercase tracking-wide mt-0.5">Jul</p>
</div>
<div>
<h3 class="text-lg font-bold text-neutral-900 mb-1">Fisherman's Festival Warnemünde</h3>
<p class="text-sm text-neutral-400 mb-2">Alter Strom, Warnemünde</p>
<p class="text-sm text-neutral-500 leading-relaxed">Traditional festival with fresh fish, cutter regatta, shanty choirs, and fisherman's jousting on the Alter Strom.</p>
<p class="text-xs text-emerald-600 font-semibold mt-3">July 4 – 6, 2026</p>
</div>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- Map & Getting Here -->
<section id="anreise" class="ws-contact py-20 sm:py-28 px-6">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-14">
<h2 class="text-3xl sm:text-4xl font-bold text-neutral-900 mb-4">Getting Here & Orientation</h2>
<p class="text-lg text-neutral-500 max-w-2xl mx-auto">The Baltic is closer than you think — several routes lead to the sea.</p>
</div>
<!-- Map placeholder -->
<div class="bg-gradient-to-br from-sky-100 to-sky-50 rounded-2xl h-64 sm:h-80 flex items-center justify-center mb-12 border border-sky-200/50">
<div class="text-center">
<svg class="w-12 h-12 text-sky-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
<p class="text-sky-400 font-medium text-sm">Interactive map — embed map service here</p>
</div>
</div>
<!-- Transport options -->
<div class="grid md:grid-cols-3 gap-8">
<div class="text-center p-6">
<div class="w-14 h-14 bg-sky-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
<svg class="w-7 h-7 text-sky-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10m10 0H3m10 0h2m4 0a1 1 0 001-1v-3a1 1 0 00-.4-.8l-3-2.25A1 1 0 0016 9h-3v7"/>
</svg>
</div>
<h3 class="text-lg font-bold text-neutral-900 mb-2">By Car</h3>
<p class="text-sm text-neutral-500 leading-relaxed">Via the A19 (Berlin–Rostock) or A20 (Lübeck–Stettin). Well-developed federal roads along the entire coast.</p>
<p class="text-xs text-sky-600 font-semibold mt-3">Berlin to Rostock approx. 2.5 hrs</p>
</div>
<div class="text-center p-6">
<div class="w-14 h-14 bg-amber-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
<svg class="w-7 h-7 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7h8M8 11h8m-4 4h4M4 19h16a1 1 0 001-1V6a1 1 0 00-1-1H4a1 1 0 00-1 1v12a1 1 0 001 1z"/>
</svg>
</div>
<h3 class="text-lg font-bold text-neutral-900 mb-2">By Train</h3>
<p class="text-sm text-neutral-500 leading-relaxed">IC/ICE connections to Rostock, Stralsund, and Greifswald. Regional trains serve the coastal towns.</p>
<p class="text-xs text-amber-600 font-semibold mt-3">Hamburg to Rostock approx. 2 hrs (IC)</p>
</div>
<div class="text-center p-6">
<div class="w-14 h-14 bg-emerald-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
<svg class="w-7 h-7 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
</svg>
</div>
<h3 class="text-lg font-bold text-neutral-900 mb-2">By Plane</h3>
<p class="text-sm text-neutral-500 leading-relaxed">Rostock-Laage Airport (RLG) with seasonal connections. Alternatively Hamburg (HAM) with train connections.</p>
<p class="text-xs text-emerald-600 font-semibold mt-3">Rostock-Laage to coast approx. 40 min</p>
</div>
</div>
</div>
</section>
<!-- Newsletter -->
<section class="ws-newsletter py-20 sm:py-24 px-6 bg-gradient-to-r from-sky-500 to-sky-600">
<div class="max-w-2xl mx-auto text-center">
<h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">Stay Up to Date</h2>
<p class="text-sky-100 text-lg mb-8">Receive insider tips, event updates, and exclusive offers straight to your inbox.</p>
<form class="flex flex-col sm:flex-row gap-3 max-w-lg mx-auto" aria-label="Newsletter signup">
<label for="newsletter-email" class="sr-only">Email address</label>
<input id="newsletter-email" type="email" placeholder="Your email address" required class="flex-1 bg-white/95 text-neutral-800 placeholder-neutral-400 rounded-xl px-5 py-3.5 text-base border-none outline-none focus:ring-2 focus:ring-white/50" />
<button type="submit" class="bg-amber-400 hover:bg-amber-500 text-neutral-900 font-bold px-7 py-3.5 rounded-xl transition-colors text-base whitespace-nowrap">
Subscribe
</button>
</form>
<p class="text-sky-200 text-xs mt-4">No spam. Unsubscribe anytime. We respect your privacy.</p>
</div>
</section>
<!-- Footer -->
<footer class="ws-footer bg-neutral-900 text-neutral-400 py-16 px-6">
<div class="max-w-7xl mx-auto">
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-10 mb-12">
<!-- Region -->
<div>
<h3 class="text-white font-bold text-sm uppercase tracking-wider mb-4">Region</h3>
<ul class="space-y-2.5 text-sm">
<li><a href="#" class="hover:text-white transition-colors">Rügen</a></li>
<li><a href="#" class="hover:text-white transition-colors">Usedom</a></li>
<li><a href="#" class="hover:text-white transition-colors">Fischland-Darß-Zingst</a></li>
<li><a href="#" class="hover:text-white transition-colors">Kühlungsborn</a></li>
<li><a href="#" class="hover:text-white transition-colors">Warnemünde</a></li>
<li><a href="#" class="hover:text-white transition-colors">Wismar & Surroundings</a></li>
</ul>
</div>
<!-- Service -->
<div>
<h3 class="text-white font-bold text-sm uppercase tracking-wider mb-4">Service</h3>
<ul class="space-y-2.5 text-sm">
<li><a href="#" class="hover:text-white transition-colors">Book Accommodation</a></li>
<li><a href="#" class="hover:text-white transition-colors">Trip Planning</a></li>
<li><a href="#" class="hover:text-white transition-colors">Weather & Water Temperature</a></li>
<li><a href="#" class="hover:text-white transition-colors">Accessibility</a></li>
<li><a href="#" class="hover:text-white transition-colors">Tourist Information</a></li>
<li><a href="#" class="hover:text-white transition-colors">FAQ</a></li>
</ul>
</div>
<!-- Social -->
<div>
<h3 class="text-white font-bold text-sm uppercase tracking-wider mb-4">Follow Us</h3>
<div class="flex items-center gap-3 mb-6">
<a href="#" class="w-10 h-10 bg-neutral-800 rounded-xl flex items-center justify-center hover:bg-sky-600 transition-colors" aria-label="Instagram">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
</a>
<a href="#" class="w-10 h-10 bg-neutral-800 rounded-xl flex items-center justify-center hover:bg-sky-600 transition-colors" aria-label="Facebook">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
</a>
<a href="#" class="w-10 h-10 bg-neutral-800 rounded-xl flex items-center justify-center hover:bg-sky-600 transition-colors" aria-label="YouTube">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
</a>
</div>
<p class="text-sm text-neutral-500">#DiscoverTheBaltic<br/>#MyBalticHoliday</p>
</div>
<!-- Partners -->
<div>
<h3 class="text-white font-bold text-sm uppercase tracking-wider mb-4">Partners</h3>
<div class="grid grid-cols-2 gap-3">
<div class="bg-neutral-800 rounded-xl h-12 flex items-center justify-center text-xs text-neutral-500">Tourism Board</div>
<div class="bg-neutral-800 rounded-xl h-12 flex items-center justify-center text-xs text-neutral-500">Deutsche Bahn</div>
<div class="bg-neutral-800 rounded-xl h-12 flex items-center justify-center text-xs text-neutral-500">ADAC</div>
<div class="bg-neutral-800 rounded-xl h-12 flex items-center justify-center text-xs text-neutral-500">DJH</div>
</div>
</div>
</div>
<div class="border-t border-neutral-800 pt-8 flex flex-col sm:flex-row items-center justify-between gap-4">
<a href="#" class="text-lg font-bold text-white">
Discover the<span class="text-amber-400"> Baltic</span>
</a>
<p class="text-sm text-neutral-500">© 2026 Discover the Baltic. All rights reserved.</p>
<div class="flex items-center gap-6 text-sm">
<a href="#" class="hover:text-white transition-colors">Legal Notice</a>
<a href="#" class="hover:text-white transition-colors">Privacy Policy</a>
<a href="#" class="hover:text-white transition-colors">Terms & Conditions</a>
</div>
</div>
</div>
</footer>
<!-- Mobile menu script -->
<script>
const toggle = document.getElementById('menu-toggle');
const menu = document.getElementById('mobile-menu');
toggle.addEventListener('click', () => {
const open = !menu.classList.contains('hidden');
menu.classList.toggle('hidden');
toggle.setAttribute('aria-expanded', String(!open));
toggle.setAttribute('aria-label', open ? 'Open menu' : 'Close menu');
});
// Close menu on link click
menu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
menu.classList.add('hidden');
toggle.setAttribute('aria-expanded', 'false');
toggle.setAttribute('aria-label', 'Open menu');
});
});
</script>
</body>
</html>Inviting tourism portal with ocean-blue palette. Makes visitors want to explore the region — warm, practical, and visually rich even without photographs.