/*
Theme Name: SY Amelie
Theme URI: https://www.sea-motion.de
Author: Frank Voßgätter
Description: Individuelles Theme für die Visitenkarten-Webseite von SY Amelie – Segeln, Tauchen, unabhängiges Leben auf See. Zweisprachig (DE/EN) über Polylang.
Version: 1.0
Requires PHP: 7.4
Text Domain: sy-amelie
*/

/* =========================================================
   DESIGN TOKENS
   Farben direkt aus dem SY-Amelie-Logo extrahiert (per
   Pixel-Clustering, siehe Projektnotizen), nicht geschätzt.
   ========================================================= */
:root {
  --color-bg:     #FFFFFF;
  --color-ink:    #000000; /* Fließtext, auf Wunsch reines Schwarz */
  --color-deep:   #0D5679; /* dunkles Petrol – Überschriften, Fußzeile */
  --color-mid:    #10819F; /* Haupt-Blau – Links, Buttons */
  --color-bright: #11B8BE; /* Türkis – Hover, kleine Akzente */
  --color-mist:   #AAE7DF; /* helles Mint – Flächen, Trenner */
  --color-fog:    #BAC1C3; /* Grau – Rahmen, Meta-Text */

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Public Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --measure: 68ch; /* Zeilenlänge Fließtext */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 3rem;
  --space-5: 5rem;
  --space-6: 8rem;

  --radius: 2px; /* bewusst fast kantig, kein Card-Look */
}

/* =========================================================
   RESET & BASICS
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--color-mid);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--color-bright); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-mid);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 560;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--color-deep);
  margin: 0 0 var(--space-2);
}
h1 { font-size: clamp(2.25rem, 4vw + 1rem, 4rem); }
h2 { font-size: clamp(1.65rem, 2.4vw + 1rem, 2.4rem); }
h3 { font-size: 1.3rem; }

p, ul, ol { max-width: var(--measure); }
p { margin: 0 0 var(--space-3); }

.container {
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.eyebrow { display: none; } /* bewusst nicht genutzt, siehe Design-Notiz */

/* =========================================================
   WELLEN-TRENNER
   Das wiederkehrende Gestaltungselement der Seite: die Welle
   aus dem Logo, statt generischer Linien/Cards.
   ========================================================= */
.wave-divider {
  display: block;
  width: 100%;
  height: 28px;
  margin: 0;
}
.wave-divider path { fill: var(--color-mist); }
.wave-divider.is-flipped { transform: scaleY(-1); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-2);
  max-width: 76rem;
  margin-inline: auto;
}
.site-logo img { height: 56px; width: auto; }
.site-logo { text-decoration: none; }

.primary-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}
.primary-nav a {
  color: var(--color-ink);
  text-decoration: none;
  font-size: 0.98rem;
}
.primary-nav a:hover,
.primary-nav a[aria-current="page"] { color: var(--color-mid); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-fog);
  border-radius: var(--radius);
  padding: 0.4rem 0.7rem;
  font-size: 1rem;
}

.lang-switch { display: flex; gap: 0.6rem; font-size: 0.9rem; }
.lang-switch a { text-decoration: none; color: var(--color-fog); }
.lang-switch a.active-lang { color: var(--color-deep); font-weight: 600; }

@media (max-width: 780px) {
  .nav-toggle { display: inline-block; }
  .primary-nav { display: none; width: 100%; }
  .primary-nav.is-open { display: block; }
  .primary-nav ul { flex-direction: column; gap: var(--space-2); padding: var(--space-2) 0; }
  .site-header { flex-wrap: wrap; }
}

/* =========================================================
   HERO (Startseite) – der eine bewusste Auftritts-Moment
   ========================================================= */
.hero {
  padding: var(--space-5) var(--space-3) var(--space-4);
  max-width: 76rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-4);
  align-items: center;
}
.hero h1 { margin-bottom: var(--space-2); }
.hero .lede {
  font-size: 1.2rem;
  color: var(--color-deep);
  max-width: 42ch;
}
.hero-visual { position: relative; }
.hero-visual svg { width: 100%; height: auto; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: var(--space-4); }
}

/* =========================================================
   SEKTIONEN
   ========================================================= */
.section {
  padding: var(--space-5) 0;
}
.section--tinted {
  background: linear-gradient(180deg, rgba(170,231,223,0.28), rgba(170,231,223,0));
}
.section-head { margin-bottom: var(--space-4); }
.section-head p { color: var(--color-deep); }

.teaser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-4);
}
.teaser h3 { margin-bottom: var(--space-1); }
.teaser time, .meta {
  color: var(--color-fog);
  font-size: 0.9rem;
}

/* =========================================================
   CONSENT-GATE (Zwei-Klick-Lösung für YouTube / PredictWind)
   ========================================================= */
.consent-gate {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-deep);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  overflow: hidden;
}
.consent-gate--map { aspect-ratio: 4 / 3; }
.consent-gate img.consent-gate__thumb {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55;
}
.consent-gate__inner { position: relative; z-index: 1; text-align: center; padding: var(--space-3); }
.consent-gate button {
  margin-top: var(--space-2);
  background: var(--color-bright);
  color: #05282c;
  border: none;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius);
  font-size: 1rem;
  cursor: pointer;
}
.consent-gate button:hover { background: #fff; }
.consent-gate iframe { width: 100%; height: 100%; border: 0; display: block; }

/* =========================================================
   KONTAKT
   ========================================================= */
.contact-list { list-style: none; padding: 0; margin: 0; font-size: 1.15rem; }
.contact-list li { padding: var(--space-1) 0; border-bottom: 1px solid var(--color-mist); }
.contact-list a { color: var(--color-deep); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--color-deep);
  color: #eaf6f7;
  margin-top: var(--space-5);
}
.site-footer .container {
  padding-block: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
}
.site-footer a { color: #eaf6f7; }
.site-footer .legal-links { display: flex; gap: var(--space-3); list-style: none; padding: 0; margin: var(--space-2) 0 0; font-size: 0.9rem; }