/* ==========================================================
   Offshore – Startseite (Hero Section)
   Schriften liegen lokal (kein Google-Fonts-Abruf → DSGVO)
   ========================================================== */

@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 800; font-display: swap; src: url("../fonts/montserrat-latin-800-italic.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/montserrat-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }

:root {
  --petrol: #0D4A52;        /* Hauptfarbe Schrift / Navigation / Buttons */
  --petrol-dark: #083A41;
  --turquoise: #3AA6B4;     /* Akzent (handgezeichnete Elemente) */
  --sand: #F4E7DE;          /* heller Beige-/Sandton aus dem Bild */
  --sand-2: #EFE2D8;
  --white: #FFFFFF;

  --font-head: "Montserrat", "Arial Black", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* 1 Bildpixel der 1536px breiten Vorlage – damit skaliert der Desktop wie das Referenzbild */
  --u: min(calc(min(100vw, 2560px) / 1536), calc(100vh / 864));
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--petrol);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

/* ==========================================================
   HERO – Basis (Mobil zuerst)
   ========================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #F1E6DF 0%, var(--sand) 55%, var(--sand) 100%);
  overflow: hidden;
}

/* ---------- Navigation ---------- */
.nav {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 22px;
}
.nav__logo img { height: 44px; width: auto; }

.nav__links { display: flex; gap: 40px; }
.nav__links a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .01em;
  text-decoration: none;
  color: var(--petrol);
  position: relative;
  padding: 6px 0;
}
.nav__links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px;
  background: var(--turquoise);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.nav__links a:hover::after, .nav__links a:focus-visible::after { transform: scaleX(1); }

.btn-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px 12px 22px;
  border-radius: 12px;
  background: var(--petrol);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(8, 58, 65, .18);
  transition: background .2s ease, transform .2s ease;
}
.btn-cta svg { width: 18px; height: 18px; transition: transform .2s ease; }
.btn-cta:hover { background: var(--petrol-dark); }
.btn-cta:hover svg { transform: translateX(3px); }

/* Mobiles Menü */
.nav__toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 11px;
  border: 0; border-radius: 12px;
  background: var(--petrol);
  cursor: pointer;
}
.nav__toggle span { display: block; height: 2px; border-radius: 2px; background: var(--white); transition: transform .25s ease, opacity .2s ease; }
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__menu {
  position: absolute; top: 100%; left: 14px; right: 14px;
  display: none;
  flex-direction: column; align-items: stretch; gap: 8px;
  padding: 14px;
  background: rgba(250, 243, 238, .97);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(8, 58, 65, .16);
}
.nav.is-open .nav__menu { display: flex; }
.nav__menu .nav__links { flex-direction: column; gap: 0; }
.nav__menu .nav__links a { display: block; padding: 12px 8px; font-size: 17px; }
.nav__menu .nav__links a::after { display: none; }
.nav__menu .btn-cta { justify-content: center; margin-top: 4px; }

/* ---------- Text ---------- */
.hero__main { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; }
.hero__text { padding: 26px 22px 0; }

.hero__title {
  margin: 0 0 .72em;
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(52px, 15vw, 80px);
  line-height: .87;
  letter-spacing: -.035em;
  color: var(--petrol);
}
.hero__title .line { display: block; width: max-content; position: relative; }

.accent { position: absolute; pointer-events: none; user-select: none; max-width: none; }
/* Werte relativ zur Schriftgröße → bleiben an der Überschrift „kleben“ */
.accent--strokes   { left: calc(100% + .02em); top: -.52em; width: 1.02em; }
.accent--underline { left: -.06em; top: 1.0em; width: 2.8em; }

.hero__sub {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(18px, 5vw, 22px);
  line-height: 1.28;
  letter-spacing: -.005em;
  color: var(--petrol);
}

/* ---------- Store-Buttons ---------- */
.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; scroll-margin-top: 120px; border-radius: 16px; }
.store {
  display: inline-flex; align-items: center; gap: 10px;
  height: 54px; min-width: 172px;
  padding: 0 20px 0 16px;
  border-radius: 12px;
  background: var(--petrol);
  color: var(--white);
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(8, 58, 65, .18);
  transition: background .2s ease, transform .2s ease;
}
.store:hover { background: var(--petrol-dark); transform: translateY(-1px); }
.store__icon { width: 26px; height: 26px; flex: none; }
.store__label { display: flex; flex-direction: column; font-family: var(--font-body); font-weight: 600; font-size: 19px; line-height: 1.05; letter-spacing: -.01em; }
.store__label small { font-weight: 400; font-size: 10.5px; letter-spacing: .02em; margin-bottom: 2px; opacity: .92; }

/* Klick auf „Get the App“ → Buttons kurz hervorheben */
.stores:target { animation: pulse 1.4s ease 1; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(58, 166, 180, 0); } 30% { box-shadow: 0 0 0 10px rgba(58, 166, 180, .35); } }

/* ---------- Bild + Smartphone (Mobil/Tablet) ---------- */
.hero__visual { position: relative; margin-top: 18px; }
.hero__band img {
  width: 100%; height: auto;
  aspect-ratio: 1204 / 1200; object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 78%, transparent 100%);
}
@supports ((mask-composite: intersect) or (-webkit-mask-composite: source-in)) {
  .hero__band img {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 78%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 22%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 78%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 22%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
}
.hero__phone {
  position: absolute;
  left: 2%; bottom: -14%;
  width: 46%;
  filter: drop-shadow(0 22px 26px rgba(20, 40, 45, .28));
}
.hero__phone img { width: 100%; height: auto; }

/* ---------- Funktionen ---------- */
.features {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 92px 14px 22px;
}
.feature {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 8px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--petrol);
}
.feature > img { height: 38px; width: auto; }
.feature > span { position: relative; }
.feature:nth-child(odd) { border-right: 1px solid rgba(13, 74, 82, .18); }
.feature:nth-child(-n+2) { border-bottom: 1px solid rgba(13, 74, 82, .18); }

/* ==========================================================
   Tablet
   ========================================================== */
@media (min-width: 640px) {
  .nav { padding: 24px 40px; }
  .nav__logo img { height: 52px; }
  .hero__text { padding: 40px 40px 0; }
  .hero__title { font-size: clamp(80px, 12vw, 112px); }
  .hero__sub { font-size: 24px; }
  .hero__visual { width: min(92%, 760px); margin: 0 0 0 auto; }
  .hero__phone { width: 38%; left: 4%; }
  .features { margin: 110px 40px 28px; }
  .feature { font-size: 16px; }
  .feature > img { height: 42px; }
}

/* ==========================================================
   Navigation Desktop (Startseite + Unterseiten)
   ========================================================== */
@media (min-width: 1100px) {
  .nav { padding: max(22px, calc(var(--u) * 30)) calc(var(--u) * 104) 0; gap: calc(var(--u) * 40); }
  .nav__logo img { height: max(48px, calc(var(--u) * 62)); }
  .nav__toggle { display: none; }
  .nav__menu {
    position: static; display: flex; flex: 1;
    flex-direction: row; align-items: center; justify-content: space-between;
    padding: 0; background: none; box-shadow: none; border-radius: 0;
  }
  /* Menüpunkte verteilen sich gleichmäßig zwischen Logo und Button */
  .nav__menu .nav__links {
    flex: 1; flex-direction: row; justify-content: center;
    gap: max(48px, calc(var(--u) * 92));
    margin: 0 calc(var(--u) * 40);
  }
  .nav__menu .nav__links a { display: inline; padding: 8px 0; font-size: max(17px, calc(var(--u) * 21)); font-weight: 500; letter-spacing: .015em; }
  .nav__menu .nav__links a::after { display: block; }
  .nav__menu .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
  .nav__menu .btn-cta { margin: 0; font-size: max(15px, calc(var(--u) * 18)); padding: max(12px, calc(var(--u) * 15)) max(18px, calc(var(--u) * 22)) max(12px, calc(var(--u) * 15)) max(20px, calc(var(--u) * 26)); border-radius: max(12px, calc(var(--u) * 13)); }
}

/* ==========================================================
   DESKTOP – nah am Referenzbild
   Hintergrundbild (inkl. Smartphone) füllt die ganze Hero Section
   ========================================================== */
@media (min-width: 1100px) and (min-aspect-ratio: 13/9) {
  .hero {
    background-color: var(--sand);
    background-image: url("../img/hero-bg.jpg");
    background-image: image-set(url("../img/hero-bg.webp") type("image/webp"), url("../img/hero-bg.jpg") type("image/jpeg"));
    background-size: cover;
    background-position: 82% 95%;
    background-repeat: no-repeat;
  }

  /* Text */
  .hero__main { flex-direction: row; }
  .hero__text { padding: calc(var(--u) * 62) 0 0 calc(var(--u) * 104); }
  .hero__title { margin-bottom: 0; font-size: calc(var(--u) * 110); line-height: .865; letter-spacing: -.03em; }
  .hero__sub { margin-top: calc(var(--u) * 72); font-size: calc(var(--u) * 31); line-height: 1.17; }

  .stores { gap: calc(var(--u) * 16); margin-top: calc(var(--u) * 30); }
  .store { height: calc(var(--u) * 58); min-width: calc(var(--u) * 186); padding: 0 calc(var(--u) * 22) 0 calc(var(--u) * 18); gap: calc(var(--u) * 11); border-radius: calc(var(--u) * 12); }
  .store__icon { width: calc(var(--u) * 27); height: calc(var(--u) * 27); }
  .store__label { font-size: calc(var(--u) * 20); }
  .store__label small { font-size: calc(var(--u) * 11); }

  /* Smartphone ist hier Teil des Hintergrundbildes */
  .hero__visual { display: none; }

  /* Funktionen am unteren Rand */
  .features {
    grid-template-columns: repeat(4, 1fr);
    margin: 0 calc(var(--u) * 104) calc(var(--u) * 26);
  }
  .feature {
    gap: calc(var(--u) * 10);
    padding: calc(var(--u) * 4) calc(var(--u) * 10);
    font-size: max(14px, calc(var(--u) * 17));
  }
  .feature > img { height: calc(var(--u) * 40); }
  .feature, .feature:nth-child(odd), .feature:nth-child(-n+2) { border: 0; }
  .feature + .feature { border-left: 1px solid rgba(13, 74, 82, .22); }
}

/* ==========================================================
   Weitere Bereiche (Platzhalter)
   ========================================================== */
.section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 96px 24px;
  scroll-margin-top: 0;
}
.section + .section { border-top: 1px solid rgba(13, 74, 82, .12); }
.section h2 { margin: 0 0 12px; font-family: var(--font-head); font-weight: 800; font-size: clamp(30px, 4vw, 44px); letter-spacing: -.02em; }
.section p { margin: 0; font-size: 18px; line-height: 1.6; opacity: .8; }

.footer {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center;
  max-width: 1100px; margin: 0 auto; padding: 28px 24px 40px;
  border-top: 1px solid rgba(13, 74, 82, .12);
  font-size: 14px;
}
.footer nav { display: flex; gap: 22px; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* Fokus sichtbar für Tastatur */
a:focus-visible, button:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 3px; border-radius: 6px; }

/* ==========================================================
   Unterseiten (App, Features, About, Support)
   ========================================================== */
.page-header { background: linear-gradient(180deg, #EEE3DC 0%, var(--sand) 100%); }
.page-header .nav { padding-bottom: 18px; }
.page-intro { max-width: 1100px; margin: 0 auto; padding: 56px 24px 24px; }
.page-intro h1 {
  position: relative; display: inline-block; margin: 0;
  font-family: var(--font-head); font-style: italic; font-weight: 800;
  font-size: clamp(48px, 7vw, 96px); line-height: .95; letter-spacing: -.03em;
}
.page-intro h1 .accent--underline { left: -.04em; top: 100%; width: 100%; margin-top: .02em; }
.page-intro h1 { margin-bottom: .55em; }
.page-intro p { margin: 1.1em 0 0; max-width: 640px; font-size: clamp(18px, 2vw, 22px); line-height: 1.45; }
.page-body { max-width: 1100px; margin: 0 auto; padding: 24px 24px 96px; }
.page-body .placeholder { padding: 28px; border: 1.5px dashed rgba(13, 74, 82, .28); border-radius: 18px; font-size: 17px; opacity: .85; }
.page-body .stores { margin-top: 8px; }
.feature-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.feature-card { padding: 26px; border-radius: 18px; background: rgba(255, 255, 255, .55); box-shadow: 0 8px 26px rgba(8, 58, 65, .07); }
.feature-card img { height: 40px; width: auto; margin-bottom: 16px; }
.feature-card h2 { margin: 0 0 8px; font-family: var(--font-head); font-weight: 800; font-size: 21px; }
.feature-card p { margin: 0; font-size: 16px; line-height: 1.5; opacity: .85; }

/* Hinweis „Bald verfügbar“ */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 100;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 14px 22px; border-radius: 14px;
  background: var(--petrol); color: var(--white);
  font-family: var(--font-body); font-weight: 500; font-size: 16px;
  box-shadow: 0 14px 34px rgba(8, 58, 65, .28);
  transition: opacity .25s ease, transform .25s ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Auswahlfenster „Get the App“ */
.store-dialog { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; }
.store-dialog[hidden] { display: none; }
.store-dialog__backdrop { position: absolute; inset: 0; background: rgba(6, 36, 40, .45); backdrop-filter: blur(3px); opacity: 0; transition: opacity .2s ease; }
.store-dialog__box {
  position: relative; width: min(100%, 460px);
  padding: 36px 32px 32px; border-radius: 22px;
  background: var(--sand); text-align: center;
  box-shadow: 0 30px 70px rgba(6, 36, 40, .3);
  opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .2s ease, transform .2s ease;
}
.store-dialog.is-open .store-dialog__backdrop { opacity: 1; }
.store-dialog.is-open .store-dialog__box { opacity: 1; transform: none; }
.store-dialog h2 { margin: 0; font-family: var(--font-head); font-style: italic; font-weight: 800; font-size: 34px; letter-spacing: -.02em; color: var(--petrol); }
.store-dialog p { margin: 10px 0 24px; font-size: 17px; color: var(--petrol); }
.store-dialog__close {
  position: absolute; top: 12px; right: 12px; width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: transparent; color: var(--petrol);
  font-size: 30px; line-height: 1; cursor: pointer;
}
.store-dialog__close:hover { background: rgba(13, 74, 82, .08); }
.stores--dialog { justify-content: center; margin-top: 0; }
.stores--dialog .store { height: 58px; min-width: 186px; }
.stores--dialog .store__icon { width: 27px; height: 27px; }
.stores--dialog .store__label { font-size: 20px; }
.stores--dialog .store__label small { font-size: 11px; }

@media (min-width: 1100px) {
  .page-intro, .page-body { max-width: none; padding-left: calc(var(--u) * 104); padding-right: calc(var(--u) * 104); }
  .page-body > * { max-width: 1240px; }
}