/* ============================================================
   Hurghada Feeling – zentrales Stylesheet
   Reines CSS, keine externen Ressourcen, mobile-first.
   Farbwelt "Karibik hell" laut Briefing Abschnitt 6:
   Türkis nur für Flächen/Deko, Text-Türkis für Überschriften
   und Links, Korallrot ausschließlich am CTA.
   ============================================================ */

:root {
  --tuerkis: #22B8C4;
  --text-tuerkis: #146A72;
  --aqua: #6FD8D6;
  --helles-aqua: #BFEBE6;
  --sand: #F3E9D2;
  --koralle: #FF7A59;
  --koralle-hover: #F0663F;
  --dunkelblau: #12474F;
  --weiss: #FFFFFF;
  --platzhalter-gelb: #FFE9A8;

  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-h1: clamp(2.1rem, 6vw, 3.3rem);
  --fs-h2: clamp(1.6rem, 4.5vw, 2.25rem);
  --fs-h3: 1.15rem;
  --fs-lead: clamp(1.05rem, 2.5vw, 1.25rem);
  /* 20 px fett: erfüllt "mindestens 18 px" aus dem Briefing UND die
     WCAG-Schwelle für große Schrift (ab 18,66 px fett), ab der 3:1 genügt. */
  --fs-cta: 1.25rem;

  --raum-1: 0.5rem;
  --raum-2: 1rem;
  --raum-3: 1.5rem;
  --raum-4: 2rem;
  --raum-5: 3rem;
  --raum-6: 4rem;
  /* Untergrenze 3rem: am Handy wirken die Desktop-Abstände sonst übertrieben */
  --abschnitt-raum: clamp(3rem, 9vw, 6rem);

  --radius: 12px;
  --schatten: 0 2px 12px rgba(18, 71, 79, 0.12);
  --kopf-hoehe: 4.25rem;
}

/* ---------- Grundlagen ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--dunkelblau);
  background: var(--weiss);
}

h1, h2, h3 {
  color: var(--text-tuerkis);
  line-height: 1.2;
  margin: 0 0 var(--raum-3);
}

h1 { font-size: var(--fs-h1); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); margin-bottom: var(--raum-2); }

p { margin: 0 0 var(--raum-3); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--text-tuerkis);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

a:hover { color: var(--dunkelblau); }

:focus-visible {
  outline: 3px solid var(--text-tuerkis);
  outline-offset: 2px;
  border-radius: 2px;
}

img, svg { max-width: 100%; display: block; }

/* Sichtbare ⟪…⟫-Platzhalter: gelb hinterlegt, sofort erkennbar */
mark.ph {
  background: var(--platzhalter-gelb);
  color: var(--dunkelblau);
  padding: 0 0.35em;
  border-radius: 4px;
  border: 1px dashed rgba(18, 71, 79, 0.45);
}

.container {
  width: min(100% - 2.5rem, 68rem);
  margin-inline: auto;
}

.fliesstext { max-width: 46rem; margin-inline: auto; }

/* Sprunglink für Tastaturnutzung */
.sprunglink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--dunkelblau);
  color: var(--weiss);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius) 0;
}

.sprunglink:focus-visible {
  left: 0;
  outline-color: var(--weiss);
  outline-offset: -6px;
}

/* ---------- Kopfbereich und Navigation ---------- */

.kopf {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: var(--weiss);
  box-shadow: 0 1px 8px rgba(18, 71, 79, 0.10);
}

.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-2);
  min-height: var(--kopf-hoehe);
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--dunkelblau);
  /* hebt das Touch-Ziel über 44 px, ohne die Kopfzeile zu strecken */
  padding-block: 0.25rem;
  margin-block: -0.25rem;
}

.marke svg { width: 42px; height: 42px; flex: none; }

.wortmarke {
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.menue-schalter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--dunkelblau);
  cursor: pointer;
}

.menue-schalter:hover { background: var(--helles-aqua); }

.menue-schalter svg { width: 26px; height: 26px; }

.menue-schalter .icon-schliessen { display: none; }
.menue-schalter[aria-expanded="true"] .icon-menue { display: none; }
.menue-schalter[aria-expanded="true"] .icon-schliessen { display: block; }

.nav-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--weiss);
  box-shadow: 0 12px 20px rgba(18, 71, 79, 0.15);
  border-top: 1px solid var(--helles-aqua);
}

.nav-panel.offen { display: block; }

.nav-liste {
  list-style: none;
  margin: 0;
  padding: var(--raum-2);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nav-liste a:not(.btn-cta) {
  display: block;
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.nav-liste a:not(.btn-cta):hover {
  background: var(--helles-aqua);
  color: var(--dunkelblau);
}

/* Der WhatsApp-Button steht nur in der Desktop-Kopfzeile. Im
   Mobilmenü bewusst nicht: Wer das Menü öffnet, will springen –
   die Anfrage übernimmt die fixe Leiste unten. */
.nav-cta-punkt { display: none; }

/* In der Kopfzeile die Umriss-Variante mit Türkis-Rahmen, damit
   nie zwei Voll-Korall-Buttons gleichzeitig im Bild stehen. */
.nav-cta-punkt .btn-cta {
  width: 100%;
  background: transparent;
  border: 2px solid var(--tuerkis);
  box-shadow: none;
  color: var(--dunkelblau);
  font-size: 1rem;
  font-weight: 600;
  padding: 0.5rem 0.95rem;
  min-height: 44px;
}

.nav-cta-punkt .btn-cta:hover {
  background: var(--helles-aqua);
  color: var(--dunkelblau);
  transform: none;
}

.nav-cta-punkt .btn-cta svg { width: 18px; height: 18px; }

/* ---------- CTA-Button ---------- */

.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--koralle);
  color: var(--dunkelblau);
  font-weight: 700;
  font-size: var(--fs-cta);
  line-height: 1.2;
  padding: 0.8rem 1.5rem;
  min-height: 48px;
  border-radius: var(--radius);
  text-decoration: none;
  box-shadow: var(--schatten);
  transition: background-color 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.btn-cta:hover {
  background: var(--koralle-hover);
  color: var(--dunkelblau);
  transform: translateY(-1px);
}

.btn-cta:focus-visible {
  outline: 3px solid var(--dunkelblau);
  outline-offset: 3px;
}

.btn-cta svg { width: 22px; height: 22px; flex: none; }

/* Fixer WhatsApp-Button unten – nur mobil */
.mobil-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  box-shadow: 0 -2px 12px rgba(18, 71, 79, 0.15);
}

.mobil-cta .btn-cta {
  width: 100%;
  /* 19 px fett: bleibt über der WCAG-Schwelle für große Schrift (18,66 px)
     und passt bei 375 px in eine Zeile */
  font-size: 1.1875rem;
  padding: 0.8rem 1rem;
}

body { padding-bottom: 5.5rem; } /* Platz für den fixen Mobil-CTA */

/* Die Leiste ist ohne JavaScript durchgehend sichtbar (Fallback).
   js/main.js blendet sie per IntersectionObserver aus, solange der
   Start-CTA im Bild ist – sonst stehen im ersten Viewport zwei
   identische Korall-Buttons übereinander. */
/* Einblenden weich (0,25 s) … */
.mobil-cta {
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

/* … Ausblenden schnell (0,1 s), damit beim Erreichen eines
   Korall-CTAs kein Überlappungsfenster entsteht */
.mobil-cta-versteckt {
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity 0.1s ease, transform 0.1s ease, visibility 0.1s;
}

/* ---------- Abschnitte ---------- */

.abschnitt { padding-block: var(--abschnitt-raum); }

.abschnitt-hellaqua { background: var(--helles-aqua); }
.abschnitt-sand { background: var(--sand); }

.abschnitt h2 {
  text-align: center;
}

/* Wellen-Deko unter Abschnittsüberschriften (Türkis/Aqua, nur Zierde) */
.abschnitt h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 14px;
  margin: 0.65rem auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='14' viewBox='0 0 72 14'%3E%3Cpath d='M2 5c6-4 12-4 18 0s12 4 18 0 12-4 18 0' fill='none' stroke='%2322B8C4' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M10 11c5-3 10-3 15 0s10 3 15 0' fill='none' stroke='%236FD8D6' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Startbereich (Vollbild-Hero) ----------
   Zwei Zustände, damit das echte Boot-Foto später ohne Umbau
   eingesetzt werden kann:
   - .held-hell  → jetzt: heller Verlauf, dunkler Text
   - .held-foto  → später: Foto als Hintergrund, Abdunklung, heller Text */

.held {
  position: relative;
  margin-top: var(--kopf-hoehe);
  min-height: calc(100vh - var(--kopf-hoehe));
  min-height: calc(100svh - var(--kopf-hoehe));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--raum-5) 0 6.5rem;
}

.held-inhalt { position: relative; z-index: 2; }

.held .unterzeile {
  font-size: var(--fs-lead);
  max-width: 42rem;
  margin: 0 auto var(--raum-3);
}

.preis-anker {
  font-size: 1.0625rem;
  max-width: 42rem;
  margin: 0 auto var(--raum-4);
}

.preis-anker strong { color: var(--text-tuerkis); }

/* Das Startfoto liegt als Hintergrund hinter dem Text */
.held picture { display: contents; }

.held-bild {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Abdunklung: Werte nachgemessen (siehe tools/kontrast-hero.mjs), damit
   weißer Text auch über dem hellen Himmel sicher über 4,5:1 bleibt. */
.held-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10, 42, 47, 0.57) 0%, rgba(10, 42, 47, 0.68) 45%, rgba(10, 42, 47, 0.68) 80%, rgba(10, 42, 47, 0.55) 100%);
}

.held-foto h1,
.held-foto .unterzeile,
.held-foto .preis-anker,
.held-foto .preis-anker strong { color: var(--weiss); }

/* ---------- Fotos ---------- */

.foto {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--helles-aqua);
}

.foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hochformat, bei dem der Bildausschnitt tiefer sitzen muss, damit der
   Rumpf im Querformat-Rahmen nicht abgeschnitten wird */
.bild-tiefer { object-position: center 70%; }

/* Umgekehrter Fall: höher ansetzen, damit vom Sitzbereich mit Wasser
   mehr und von der Liegefläche weniger zu sehen ist */
.bild-hoeher { object-position: center 35%; }

/* Auf kurzen oder sehr schmalen Bildschirmen (z. B. iPhone SE der
   ersten Generation, 320×568) rutschte der Anfrage-Button sonst unter
   die Bildschirmkante. Hier rückt der Startbereich enger zusammen,
   damit Überschrift, Unterzeile, Preiszeile und Button ohne Scrollen
   sichtbar bleiben. */
@media (max-height: 640px), (max-width: 360px) {
  .held { padding-top: var(--raum-2); padding-bottom: var(--raum-4); }
  .held h1 { font-size: clamp(1.65rem, 7vw, 2.1rem); margin-bottom: var(--raum-2); }
  .held .unterzeile { font-size: 1rem; margin-bottom: var(--raum-2); }
  .held .preis-anker { font-size: 1rem; margin-bottom: var(--raum-3); }
}

/* ---------- Foto-Platzhalter ---------- */

.foto-platzhalter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-align: center;
  padding: var(--raum-2);
  border: 2px dashed var(--tuerkis);
  border-radius: var(--radius);
  background: var(--helles-aqua);
  color: var(--dunkelblau);
}

.foto-platzhalter.fp-weiss { background: var(--weiss); }

.foto-platzhalter svg {
  width: 34px;
  height: 34px;
  color: var(--text-tuerkis);
}

.foto-platzhalter .fp-titel { font-weight: 700; }

.foto-platzhalter .fp-motiv {
  font-size: 0.9rem;
  hyphens: auto;
  overflow-wrap: break-word;
}

.fp-4-3 { aspect-ratio: 4 / 3; }
.fp-16-9 { aspect-ratio: 16 / 9; }

/* ---------- Leistungslisten mit Haken-Icons ---------- */

.leistungen {
  list-style: none;
  margin: 0 0 var(--raum-3);
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.leistungen li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.leistungen svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 0.2rem;
}

/* ---------- Galerie ---------- */

/* Am Handy eine Spalte über die volle Breite: zweispaltig wären die
   Bilder nur 160 px breit – auf einem Boots-Angebot sind die Fotos
   das Produkt, da ist Erkennbarkeit wichtiger als kurze Seite.
   Die 4:3-Rahmen begrenzen dabei die Höhe, sonst würden die
   Hochformate je fast eine ganze Bildschirmhöhe einnehmen. */
.galerie {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin-top: var(--raum-4);
}

/* Die Tour-Galerie steht zwischen zwei Textblöcken und braucht darunter
   denselben Abstand wie zum nächsten Absatz */
.galerie-tour { margin-bottom: var(--raum-5); }

/* Ab Tablet zweispaltig – dort reicht die Breite für 2×2.
   minmax(0, 1fr) statt 1fr: lange Wörter dürfen die Spalten nicht
   über den Container hinausdrücken. Bei ungerader Bildanzahl füllt
   das letzte Element die ganze Reihe und wird flacher (21:9), damit
   es nicht zum Riesenblock wird. */
@media (min-width: 768px) {
  .galerie {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--raum-3);
  }

  .galerie > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    aspect-ratio: 21 / 9;
  }
}

/* ---------- Karten ---------- */

.karte {
  background: var(--weiss);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* Preisliste */
.preisliste {
  list-style: none;
  margin: 0 0 var(--raum-3);
  padding: 0;
}

.preisliste li {
  padding: 0.85rem 0.5rem;
  border-bottom: 1px solid var(--helles-aqua);
}

.preisliste li:last-child { border-bottom: 0; }

.preisliste .umwelt {
  background: var(--sand);
  border-radius: 8px;
  font-weight: 700;
  /* Mehr Innenabstand als die Zeilen darüber, damit die Fläche nicht am
     Text klebt. Die 0,25rem Außenabstand nach außen gleichen das wieder
     aus, sonst stünde diese Zeile 4 px weiter rechts als die anderen. */
  padding-inline: 0.75rem;
  margin-inline: -0.25rem;
}

.beispiel { font-style: italic; }

/* ---------- Über uns: typografisch, ohne Porträt ---------- */

/* Mehr Weißraum als in den anderen Abschnitten – der Bereich soll
   ruhig wirken, nicht leer */
.abschnitt-ueber { padding-block: calc(var(--abschnitt-raum) * 1.3); }

/* Vier zusammenhängende Absätze am Stück: hier zählt die Zeilenlänge
   mehr als die Spaltenbreite. 52rem ergaben gemessene 84 Zeichen pro
   Zeile, 42rem ergeben 68 – das liegt im gut lesbaren Bereich. */
.ueber-text {
  max-width: 42rem;
  margin-inline: auto;
}

/* Alle Absätze bewusst gleich gesetzt: gleiche Größe, gleicher
   Abstand, keine Hervorhebung. Der Abschnitt hat kein Bild und lebt
   von Ruhe – wechselnde Schriftgrößen wirken dort unaufgeräumt. */
.ueber-text p {
  font-size: var(--fs-lead);
  margin-bottom: var(--raum-4);
}

.ueber-text p:last-child { margin-bottom: 0; }

/* Vorbereitet für das Gruppenporträt im September (im HTML steht die
   Einbauanleitung). Behält das natürliche Seitenverhältnis, damit Hoch-
   wie Querformat ohne Layout-Umbau passen. */
.ueber-bild {
  max-width: 52rem;
  margin: var(--raum-5) auto 0;
}

.ueber-bild img { height: auto; }

/* ---------- Karte im Kontakt-Abschnitt ---------- */

.karte-block {
  max-width: 46rem;
  margin: var(--raum-4) auto 0;
}

.karte-fuss {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--raum-2);
  margin-top: var(--raum-3);
}

.karte-hinweis {
  margin: 0;
  font-size: 0.9rem;
  text-align: center;
}

/* Namensnennung am Kartenbild – Pflicht bei OpenStreetMap */
/* Die Namensnennung ist rechtlich vorgeschrieben und soll deshalb
   nicht die kleinste Schrift der Seite sein: 0,9rem = 14,4 px, dieselbe
   Größe wie die Kleinschrift im Fußbereich. */
.karte-quelle {
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
  text-align: right;
}

/* Zweitrangiger Button: Umriss statt Fläche, damit Korallrot allein
   dem WhatsApp-CTA gehört (gleiche Optik wie der CTA in der Kopfzeile) */
.btn-umriss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  border: 2px solid var(--tuerkis);
  border-radius: var(--radius);
  background: var(--weiss);
  color: var(--dunkelblau);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.btn-umriss:hover {
  background: var(--helles-aqua);
  color: var(--dunkelblau);
}

.btn-umriss svg { width: 18px; height: 18px; flex: none; }

/* Kontaktliste */
.kontaktliste {
  list-style: none;
  margin: 0 0 var(--raum-4);
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.kontaktliste li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
}

/* Telefonnummern: nie mitten in der Ziffernfolge umbrechen, und als
   Link hoch genug zum Antippen (44 px) ohne die Zeilen auseinander-
   zuziehen */
.kontaktliste .nummer {
  display: inline-block;
  padding: 0.55rem 0.2rem;
  margin: -0.4rem -0.2rem;
  white-space: nowrap;
}

.kontakt-cta { text-align: center; }

.kontakt-hinweis {
  font-size: 0.9rem;
  margin-top: var(--raum-2);
}

/* ---------- Fußbereich ---------- */

.fuss {
  background: var(--dunkelblau);
  color: var(--weiss);
  padding-block: var(--raum-5);
  text-align: center;
}

.fuss img { margin: 0 auto var(--raum-3); }

.fuss p { margin-bottom: var(--raum-2); }

/* Footer-Links als fingertaugliche Ziele (mind. 44 px hoch),
   ohne den Zeilenrhythmus optisch zu sprengen */
.fuss a {
  color: var(--weiss);
  display: inline-block;
  padding: 0.65rem 0.45rem;
  margin: -0.45rem -0.1rem;
}

.fuss a:hover { color: var(--helles-aqua); }

.fuss :focus-visible { outline-color: var(--weiss); }

.fuss .klein { font-size: 0.9rem; color: var(--helles-aqua); }

/* ---------- Rechtsseiten (Impressum, Datenschutz) ---------- */

.rechtsseite-kopf {
  background: var(--weiss);
  box-shadow: 0 1px 8px rgba(18, 71, 79, 0.10);
  padding-block: var(--raum-2);
}

.rechtsseite main {
  padding-block: var(--raum-5);
}

.rechtsseite main .container { max-width: 46rem; }

.rechtsseite h1 { font-size: var(--fs-h2); }

.rechtsseite h2 { font-size: 1.2rem; margin-top: var(--raum-4); }

.zurueck { display: inline-block; margin-bottom: var(--raum-4); }

/* ---------- Größere Bildschirme ---------- */

@media (min-width: 768px) {
  body { padding-bottom: 0; }
  .mobil-cta { display: none; }
  .held { min-height: min(46rem, calc(100svh - var(--kopf-hoehe))); }

}

/* Erst ab 1140 px passt die volle Navigation samt CTA ohne Umbrüche
   in eine Zeile – darunter bleibt das Burger-Menü. */
@media (min-width: 1140px) {
  .menue-schalter { display: none; }

  .nav-panel {
    display: block;
    position: static;
    background: transparent;
    box-shadow: none;
    border-top: 0;
  }

  .nav-liste {
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
  }

  .nav-liste a:not(.btn-cta) { padding: 0.55rem 0.75rem; }

  .nav-cta-punkt { display: block; margin: 0 0 0 0.5rem; }
  .nav-cta-punkt .btn-cta { width: auto; }
}

/* ---------- Reduzierte Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}