:root {
      --navy: #061f35;
      --navy-2: #0a3e5d;
      --blue: #078dc7;
      --gold: #d8a239;
      --gold-light: #f4cc72;
      --paper: #fff;
      --mist: #edf4f7;
      --ink: #102b3e;
      --muted: #58707e;
      --line: #d5e2e8;
      --radius: 24px;
      --max: 1220px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.55;
      text-rendering: optimizeLegibility;
    }
    img { display: block; max-width: 100%; }
    a { color: inherit; }
    h1, h2, h3, p { margin-top: 0; }
    h1, h2, h3 { line-height: 1.04; letter-spacing: -.035em; }
    h1 { margin-bottom: 22px; font-size: clamp(3rem, 6vw, 6.4rem); }
    h2 { margin-bottom: 18px; font-size: clamp(2rem, 4vw, 3.7rem); }
    h3 { margin-bottom: 9px; font-size: 1.35rem; }
    p { color: var(--muted); }
    .wrap { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
    .skip-link { position: fixed; top: -80px; left: 16px; z-index: 50; padding: 12px 18px; border-radius: 12px; color: #fff; background: var(--navy); font-weight: 900; }
    .skip-link:focus { top: 14px; }
    a:focus-visible { outline: 3px solid #70d6ff; outline-offset: 4px; }

    .button {
      min-height: 54px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 13px 23px;
      border-radius: 999px;
      color: var(--navy);
      background: var(--gold-light);
      box-shadow: 0 16px 34px rgba(216,162,57,.25);
      font-weight: 950;
      text-decoration: none;
      transition: transform .2s ease, background .2s ease;
    }
    .button:hover { transform: translateY(-2px); background: #ffe19b; }
    .button.secondary { color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
    .button.secondary:hover { background: rgba(255,255,255,.18); }
    .button.small { min-height: 44px; padding: 10px 17px; font-size: .85rem; }

    .entry {
      position: relative;
      min-height: 830px;
      overflow: hidden;
      color: #fff;
      background: var(--navy);
      isolation: isolate;
    }
    .entry-media, .entry-media::after { position: absolute; inset: 0; }
    .entry-media { z-index: -2; margin: 0; }
    .entry-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
    .entry-media::after {
      content: "";
      background:
        linear-gradient(90deg, rgba(3,23,40,.98) 0%, rgba(3,23,40,.91) 31%, rgba(3,23,40,.48) 51%, rgba(3,23,40,.08) 76%),
        linear-gradient(0deg, rgba(3,23,40,.8) 0%, transparent 37%);
    }
    .entry-header { border-bottom: 1px solid rgba(255,255,255,.15); background: rgba(3,23,40,.62); backdrop-filter: blur(15px); }
    .nav { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .logo { width: 215px; height: auto; }
    .nav-actions { display: flex; align-items: center; gap: 18px; }
    .phone { color: #fff; font-size: .88rem; font-weight: 900; text-decoration: none; }

    .ots-quick-actions__item {
      position: fixed;
      z-index: 40;
      display: block;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: transparent;
      line-height: 0;
      text-decoration: none;
      transition: filter .2s ease, transform .2s ease;
    }
    .ots-quick-actions__item img { display: block; width: 100%; height: auto; margin: 0; border: 0; }
    .ots-quick-actions__home { top: 200px; right: 5px; width: 200px; }
    .ots-quick-actions__booking { top: 400px; right: 5px; width: 200px; }
    .ots-quick-actions__phone { top: 560px; right: -40px; width: 280px; }
    .ots-quick-actions__item:hover { filter: brightness(1.04); transform: translateY(-2px); }
    .ots-quick-actions__item:focus-visible { outline: 4px solid #ffd000; outline-offset: 4px; }

    .entry-content { min-height: 610px; display: flex; align-items: center; padding: 70px 0 120px; }
    .entry-copy { max-width: 720px; min-width: 0; }
    .eyebrow { margin: 0 0 15px; color: #8edcff; font-size: .78rem; font-weight: 950; letter-spacing: .15em; text-transform: uppercase; }
    .entry h1 { color: #fff; text-wrap: balance; }
    .entry h1 span { display: block; color: var(--gold-light); }
    .lead { max-width: 610px; margin-bottom: 28px; color: #e0edf2; font-size: clamp(1.05rem, 1.7vw, 1.28rem); }
    .actions { display: flex; flex-wrap: wrap; gap: 12px; }
    .proof { margin: 23px 0 0; color: #c8dce5; font-size: .88rem; font-weight: 850; }

    .quick-benefits { position: relative; z-index: 2; margin-top: -72px; }
    .quick-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      overflow: hidden;
      border-radius: var(--radius);
      background: #fff;
      box-shadow: 0 28px 70px rgba(6,31,53,.2);
    }
    .quick-item { min-height: 142px; display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 17px; padding: 27px; }
    .quick-item + .quick-item { border-left: 1px solid var(--line); }
    .quick-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 18px; color: var(--navy); background: #e7f5fb; font-size: 1.3rem; font-weight: 950; }
    .quick-item strong, .quick-item span { display: block; }
    .quick-item strong { color: var(--navy); }
    .quick-item span { color: var(--muted); font-size: .82rem; }

    .section { padding: 104px 0; }
    .section-head { max-width: 790px; margin-bottom: 42px; }
    .section-head .eyebrow { color: var(--blue); }
    .section-head h2 { color: var(--navy); }
    .section-head p { max-width: 680px; font-size: 1.05rem; }
    .destination-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .destination {
      position: relative;
      min-height: 325px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
      padding: 30px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      box-shadow: 0 18px 52px rgba(6,31,53,.08);
      text-decoration: none;
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .destination:hover { transform: translateY(-4px); box-shadow: 0 24px 58px rgba(6,31,53,.14); }
    .destination::after { content: attr(data-code); position: absolute; right: 18px; top: 12px; color: #eaf2f5; font-size: 5rem; font-weight: 950; line-height: 1; }
    .destination > * { position: relative; z-index: 1; }
    .destination-icon {
      width: 68px;
      height: 68px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 21px;
      color: #fff;
      background: linear-gradient(145deg, #0b4263, var(--navy));
      box-shadow: 0 12px 26px rgba(6,31,53,.16), inset 0 -2px 0 rgba(216,162,57,.3);
    }
    .destination-icon svg { width: 36px; height: 36px; overflow: visible; }
    .destination-icon .accent { color: var(--gold-light); }
    .destination h3 { color: var(--navy); font-size: clamp(1.55rem, 2.4vw, 2.2rem); }
    .destination p { margin-bottom: 20px; }
    .destination-link { color: var(--blue); font-weight: 950; }

    .hub-breadcrumb { margin: 0 0 24px; font-size: .9rem; }
    .hub-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
    .hub-breadcrumb li + li::before { content: "/"; padding-right: 8px; color: var(--muted); }
    .hub-breadcrumb a, .hub-context-links a { color: var(--blue); text-underline-offset: .18em; }
    .hub-context-links { margin-top: 34px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--mist); }
    .hub-context-links h3 { color: var(--navy); }
    .hub-context-links p:last-child { margin-bottom: 0; }

    .promise { color: #fff; background: var(--navy); }
    .promise-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 72px; }
    .promise .eyebrow { color: #8edcff; }
    .promise h2 { color: #fff; }
    .promise-copy > p { color: #c9dce5; }
    .promise-list { display: grid; gap: 12px; }
    .promise-item { display: grid; grid-template-columns: 46px 1fr; gap: 16px; padding: 20px; border: 1px solid rgba(255,255,255,.14); border-radius: 19px; background: rgba(255,255,255,.06); }
    .promise-number { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: var(--navy); background: var(--gold-light); font-weight: 950; }
    .promise-item strong { color: #fff; }
    .promise-item p { margin: 4px 0 0; color: #b9d1dc; font-size: .88rem; }

    .final { padding: 92px 0; background: linear-gradient(135deg, var(--gold), #f8d98f); }
    .final-grid { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 50px; }
    .final h2 { max-width: 760px; color: var(--navy); }
    .final p { max-width: 690px; margin-bottom: 0; color: #5b4929; }
    .final .button { color: #fff; background: var(--navy); box-shadow: 0 16px 34px rgba(6,31,53,.2); }

    footer { padding: 48px 0 26px; color: #d6e7ee; background: #041827; }
    .footer-grid { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 42px; }
    .footer-logo { width: 210px; height: auto; margin-bottom: 18px; }
    footer p { color: #a9c3cf; }
    footer h3 { color: #fff; font-size: 1rem; letter-spacing: 0; }
    .footer-links { display: grid; gap: 8px; }
    .footer-links a { width: fit-content; color: #d6e7ee; text-decoration: none; }
    .legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); color: #8faebb; font-size: .78rem; }

    @media (max-width: 920px) {
      .entry { min-height: 760px; }
      .entry-media img { object-position: 61% center; }
      .entry-media::after { background: linear-gradient(90deg, rgba(3,23,40,.97), rgba(3,23,40,.78) 56%, rgba(3,23,40,.22)); }
      .entry-copy { max-width: 610px; }
      .quick-grid, .destination-grid { grid-template-columns: 1fr; }
      .quick-item + .quick-item { border-left: 0; border-top: 1px solid var(--line); }
      .promise-grid { grid-template-columns: 1fr; gap: 38px; }
      .final-grid { grid-template-columns: 1fr; gap: 30px; }
    }

    @media (max-width: 640px) {
      .wrap { width: min(calc(100% - 28px), var(--max)); }
      .entry { min-height: 780px; }
      .nav { min-height: 76px; }
      .logo { width: 150px; }
      .phone { display: none; }
      .nav-actions .button { min-height: 42px; padding: 9px 13px; font-size: .76rem; }
      .entry-media img { object-position: 59% center; opacity: .64; }
      .entry-media::after { background: linear-gradient(180deg, rgba(3,23,40,.72), rgba(3,23,40,.92) 48%, rgba(3,23,40,.98)); }
      .entry-content { min-height: 690px; align-items: flex-end; padding: 80px 0 105px; }
      h1 { overflow-wrap: anywhere; font-size: clamp(2.15rem, 10.5vw, 2.6rem); }
      .actions .button { width: 100%; }
      .quick-benefits { margin-top: -54px; }
      .quick-item { min-height: 118px; padding: 22px; }
      .section { padding: 78px 0; }
      .destination { min-height: 265px; }
      .footer-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 520px) {
      .ots-quick-actions__home { top: 112px; right: max(8px, env(safe-area-inset-right)); width: 76px; }
      .ots-quick-actions__booking { top: 194px; right: max(8px, env(safe-area-inset-right)); width: 76px; }
      .ots-quick-actions__phone { top: 270px; right: max(-5px, calc(env(safe-area-inset-right) - 5px)); width: 102px; }
    }

    @media (min-width: 521px) and (max-width: 1200px) {
      .ots-quick-actions__home { top: 128px; right: max(8px, env(safe-area-inset-right)); width: 112px; }
      .ots-quick-actions__booking { top: 246px; right: max(8px, env(safe-area-inset-right)); width: 112px; }
      .ots-quick-actions__phone { top: 356px; right: max(-11px, calc(env(safe-area-inset-right) - 11px)); width: 150px; }
    }

    @media (max-width: 520px) and (max-height: 620px) {
      .ots-quick-actions__home { top: 72px; }
      .ots-quick-actions__booking { top: 154px; }
      .ots-quick-actions__phone { top: 230px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition-duration: .01ms !important; }
    }

/* Local overlay candidate: the hero remains full width; only copy gets a safe inset. */
:root { --hub-controls-width: 280px; --hub-circle-size: clamp(96px, 20vh, 180px); }
.hub-controls {
  position: fixed;
  z-index: 40;
  top: 100px;
  right: max(12px, env(safe-area-inset-right, 0px));
  width: var(--hub-controls-width);
  max-height: calc(100vh - 112px);
  max-height: calc(100dvh - 112px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 12px;
  overflow-y: auto;
  background: transparent;
}
.hub-controls .ots-quick-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.hub-controls .ots-quick-actions__item { position: relative; inset: auto; flex: 0 0 auto; max-width: 100%; }
.hub-controls .ots-quick-actions__home, .hub-controls .ots-quick-actions__booking { width: var(--hub-circle-size); }
.hub-controls .ots-quick-actions__phone { width: calc(var(--hub-circle-size) * 1.4); }
@media (min-width: 921px) {
  .wrap { padding-right: calc(var(--hub-controls-width) + 20px); overflow-wrap: anywhere; }
  .destination-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .destination-grid > .destination[data-code="KIEL"] { grid-column: 1 / -1; }
}
@media (min-width: 921px) and (max-width: 1200px) {
  :root { --hub-controls-width: 190px; --hub-circle-size: 112px; }
}
@media (max-width: 920px) {
  :root { --hub-quick-dock: calc(184px + env(safe-area-inset-bottom, 0px)); }
  html { height: 100%; overflow-y: auto; }
  body {
    height: calc(100vh - var(--hub-quick-dock));
    height: calc(100dvh - var(--hub-quick-dock));
    overflow-y: auto;
    overflow-wrap: anywhere;
    scroll-behavior: inherit;
    scroll-padding-block: 16px;
  }
  .nav { flex-wrap: wrap; gap: 12px; padding-block: 12px; }
  .hub-controls {
    inset: auto 0 0;
    width: auto;
    height: var(--hub-quick-dock);
    max-height: none;
    gap: 6px;
    padding: 8px max(12px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    overflow-y: visible;
    border-top: 1px solid rgba(244,204,114,.3);
    background: #041827;
  }
  .hub-controls .ots-quick-actions { flex-direction: row; justify-content: center; gap: clamp(4px, 3vw, 12px); height: 96px; }
  .hub-controls .ots-quick-actions__home, .hub-controls .ots-quick-actions__booking { width: clamp(60px, 23.75vw, 76px); }
  .hub-controls .ots-quick-actions__phone { width: clamp(76px, 30vw, 96px); }
}