/*
Theme Name: ivent-sailing cruises (Astra Child)
Template: astra
Description: Custom child theme for cruises.ivent-sailing.com - Premium-Look nach Bundle-Mockup
Version: 0.2.0
Author: ivent-sailing
*/

:root {
  /* Brand-Farben - Mockup-Stil (warm, premium) */
  --color-bg:           #FBF8F3;   /* Ivory page background */
  --color-surface:      #FFFFFF;   /* Karten, Panels */
  --color-surface-alt:  #F4EFE6;   /* Toenung fuer Wells */
  --color-ink:          #1A2330;   /* Primaer-Text */
  --color-ink-soft:     #3A4654;   /* Sekundaer-Text */
  --color-ink-muted:    #6E7884;   /* Tertiaer / Helper */
  --color-line:         #E5DDD0;   /* Trennlinien */
  --color-line-strong:  #C9BFAE;   /* Staerkere Trennlinien */
  --color-navy:         #0E2238;   /* Deep Navy - Brand, Headings, CTAs */
  --color-navy-soft:    #1F3A5C;   /* Navy Hover */
  --color-brass:        #B58A40;   /* Brass Gold Akzent */
  --color-brass-soft:   #D4B475;   /* Brass Hover/Highlight */
  --color-sea:          #2C5F7C;   /* Sea Blue, sek. Akzent */
  --color-success:      #2F7A4F;
  --color-warning:      #B45A1A;

  /* Schriften */
  --font-serif: "Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman", serif;
  --font-sans:  "Inter", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono:  ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* Container */
  --content-max:  1280px;
  --content-wide: 1440px;

  /* Radien + Schatten */
  --radius-sm: 2px;
  --radius-md: 4px;
  --shadow-1: 0 2px 8px rgba(14,34,56,0.06);
  --shadow-2: 0 8px 28px rgba(14,34,56,0.10);

  --rule: 1px solid var(--color-line);
  --rule-strong: 1px solid var(--color-line-strong);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Grundlayout */
html, body { background: var(--color-bg); color: var(--color-ink); font-family: var(--font-sans); font-feature-settings: 'cv11','ss01','ss03'; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); color: var(--color-navy); font-weight: 400; line-height: 1.15; letter-spacing: -0.005em; }
a { color: var(--color-navy); }
a:hover { color: var(--color-brass); }

.is-container { max-width: var(--content-wide); margin: 0 auto; padding: 0 var(--s-5); }

/* Container fuer Inhalte (zentriert) */
.is-content-narrow { max-width: var(--content-max); margin: 0 auto; }

/* Helper */
.placeholder-note { color: var(--color-ink-muted); font-size: 0.9rem; font-style: italic; }

/* Allgemeine Section-Hilfen (werden in Templates ueberschrieben) */
.section-eyebrow {
  font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--color-brass);
  display: inline-flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.section-eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--color-brass); }
.section-title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.8rem, 1.6vw + 1rem, 2.4rem);
  color: var(--color-navy); letter-spacing: -0.01em;
  margin: 0 0 var(--s-3); line-height: 1.1;
}
.section-title em { color: var(--color-brass); font-style: italic; }
.section-lede {
  font-family: var(--font-serif); font-size: 1.2rem; font-style: italic;
  color: var(--color-ink-soft); max-width: 56ch;
  line-height: 1.5;
  margin: 0 0 var(--s-6);
}

/* Astra-Anpassung: ivory statt weiss */
body.ivent-fullwidth { background: var(--color-bg); }
body { background: var(--color-bg); }

/* ── Lead-Form ──────────────────────────────────────────────── */
.lead-form { max-width: 640px; }
.lead-form h3 { font-family: var(--font-serif); font-size: 1.6rem; color: var(--color-navy); font-weight: 400; margin: 0 0 6px; letter-spacing: -0.01em; }
.lead-form > p { color: var(--color-ink-soft); margin: 0 0 28px; font-size: 0.95rem; }

.form-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.form-row label { font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-muted); }
.form-row input,
.form-row textarea,
.form-row select { border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 1rem; font-family: var(--font-sans); background: #fff; color: var(--color-ink); transition: border-color 160ms; width: 100%; box-sizing: border-box; }
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus { outline: none; border-color: var(--color-navy); box-shadow: 0 0 0 2px rgba(14,34,56,0.08); }
.form-row textarea { resize: vertical; min-height: 96px; }
/* Consent-Zeile */
.form-row label.consent-label { display: flex; align-items: flex-start; gap: 10px; font-size: 0.82rem; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--color-ink-soft); cursor: pointer; }
.form-row label.consent-label input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; accent-color: var(--color-navy); cursor: pointer; }

.form-row-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 14px; }
.form-row-inline .form-row { margin-bottom: 0; }

.lead-form button[type="submit"] { width: 100%; margin-top: 6px; padding: 14px 24px; background: var(--color-navy); color: #fff; border: none; border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background 160ms; }
.lead-form button[type="submit"]:hover { background: var(--color-navy-soft); }
.lead-form button[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; }

.lead-form-status { margin-top: 16px; border-radius: var(--radius-sm); font-size: 0.95rem; }
.lead-form-status.success { background: #f0faf4; border-left: 3px solid var(--color-success); padding: 16px 20px; color: var(--color-success); line-height: 1.5; }
.lead-form-status.error { background: #fff5f5; border-left: 3px solid var(--color-warning); padding: 16px 20px; color: var(--color-warning); line-height: 1.5; }

@media (max-width: 600px) { .form-row-inline { grid-template-columns: 1fr; } }

/* ── Destination-Video auf Reise-Detailseiten ───────────────── */
.trip-dest-video { margin: var(--s-6) 0; border-radius: var(--radius-sm); overflow: hidden; }
.trip-dest-video video { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }