/* ==========================================================================
   Elevation · Editorial Travel Refinement
   Rein visuelle Veredelungsschicht. Lädt NACH trip-landing-v2.css.
   Keine Struktur-, Text-, Preis- oder Statusänderung.
   Grundlage: Navy #202449 · Nacht #0B1220 · Blau #0049E6 · Neon #E8FF00
              Paper #F8F5FF · Mist #F1EFF9 · Muted #676D8D · Logo-V #C7DF00
   ========================================================================== */

:root {
  /* feinere Linien und Schatten als Ersatz für die harten Defaults */
  --line: rgba(32, 36, 73, .1);
  --line-strong: rgba(32, 36, 73, .16);
  --ink-soft: #5b6183;            /* dunkler als --muted, für 14px-Fließtext */
  --shadow: 0 18px 48px -24px rgba(22, 29, 68, .3);
  --shadow-sm: 0 8px 22px -14px rgba(22, 29, 68, .26);
  --shadow-lift: 0 26px 64px -28px rgba(22, 29, 68, .34);
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;

  /* ein einziger vertikaler Rhythmus für alle Sektionen */
  --sec-y: clamp(76px, 8.2vw, 116px);
  --gap-card: clamp(14px, 1.4vw, 20px);
}

/* --------------------------------------------------------------------------
   1 · Typografie: ruhiger Satz, verlässlicher Kontrast
   -------------------------------------------------------------------------- */
body { letter-spacing: -0.003em; }

.trip-display { letter-spacing: .018em; line-height: .94; }
.trip-eyebrow { letter-spacing: .22em; font-size: 11.5px; }
.trip-section-copy { color: var(--ink-soft); font-size: 17px; line-height: 1.72; }

.trip-benefit-card p,
.trip-date-copy,
.trip-application-note p,
.trip-details-summary p,
.trip-details-intro { color: var(--ink-soft); }

.trip-benefit-card p,
.trip-date-copy { font-size: 14.5px; line-height: 1.68; }

/* Text auf dunklem Grund: Kontrast anheben, ohne Weiß zu überstrahlen */
.trip-concept .trip-section-copy,
.trip-pillar-card p { color: rgba(255, 255, 255, .8); }
.trip-hub p { color: rgba(255, 255, 255, .82); }
.trip-footer { color: rgba(255, 255, 255, .72); }

h1, h2, h3 { text-wrap: balance; }

/* --------------------------------------------------------------------------
   2 · Sektionsrhythmus
   -------------------------------------------------------------------------- */
.trip-audience { padding: var(--sec-y) 0; }
.trip-concept { padding: var(--sec-y) 0; }
.trip-week { padding: var(--sec-y) 0 calc(var(--sec-y) + 8px); }
.trip-dates { padding: var(--sec-y) 0 calc(var(--sec-y) + 20px); }
.trip-hub { padding: var(--sec-y) 0 calc(var(--sec-y) + 28px); }
.trip-statement { padding: clamp(48px, 5vw, 64px) 0; }

.trip-benefit-grid,
.trip-pillar-grid,
.trip-date-grid { gap: var(--gap-card); margin-top: clamp(34px, 3.6vw, 46px); }

/* --------------------------------------------------------------------------
   3 · Hero: Fotografie trägt, Typo bleibt lesbar
   -------------------------------------------------------------------------- */
.trip-hero { min-height: min(820px, calc(100svh - 30px)); }

/* Kein dauerhaft wanderndes Bild mehr: einmaliger, sehr feiner Einzoom. */
.trip-hero-image {
  transform: scale(1.025);
  animation: none;
  will-change: transform;
}
html.elevation-motion-ready .trip-hero-image {
  animation: elevationHeroSettle 1.2s cubic-bezier(.22, .72, .16, 1) both;
}
@keyframes elevationHeroSettle {
  from { transform: scale(1.025); }
  to   { transform: scale(1); }
}

/* abgestufte Maske statt flächigem Grauschleier: Foto bleibt natürlich */
.trip-hero-overlay {
  background:
    radial-gradient(120% 90% at 50% 18%, rgba(8, 15, 30, .06), rgba(8, 15, 30, .5) 72%, rgba(8, 15, 30, .78)),
    linear-gradient(180deg, rgba(8, 15, 30, .3) 0%, rgba(8, 15, 30, .42) 46%, rgba(11, 18, 32, .88) 100%);
}
.trip-hero-content { padding: clamp(104px, 11vw, 136px) 0 clamp(124px, 12vw, 156px); }
.trip-hero h1:not(.trip-eyebrow),
.trip-hero .trip-hero-title {
  line-height: .9;
  text-shadow: 0 2px 28px rgba(6, 11, 24, .32);
}
.trip-hero-subline {
  color: #fff;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.68;
  text-shadow: 0 1px 18px rgba(6, 11, 24, .42);
}
.trip-hero .trip-eyebrow { color: var(--neon); letter-spacing: .3em; }
.trip-hero-line path { opacity: .72; }

/* --------------------------------------------------------------------------
   4 · Buttons und Dock
   -------------------------------------------------------------------------- */
.trip-button {
  letter-spacing: .005em;
  transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, background-color .22s ease;
}
.trip-button:hover { transform: translateY(-1.5px); box-shadow: 0 14px 30px -14px rgba(0, 73, 230, .55); }
.trip-button--neon:hover { box-shadow: 0 14px 30px -14px rgba(199, 223, 0, .8); }
.trip-button--light { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.trip-button--outline { border-color: rgba(255, 255, 255, .6); background: rgba(8, 15, 30, .22); backdrop-filter: blur(4px); }

.trip-floating-dock {
  border-color: var(--line);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 16px 40px -18px rgba(11, 18, 32, .34);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
}

.trip-header { border-bottom-color: var(--line); background: rgba(248, 245, 255, .82); }

/* --------------------------------------------------------------------------
   5 · Karten: leichter, präziser ausgerichtet
   -------------------------------------------------------------------------- */
.trip-benefit-card {
  padding: clamp(22px, 2.2vw, 28px);
  border-color: var(--line);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.trip-benefit-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.trip-benefit-icon {
  width: 44px; height: 44px;
  border-radius: 13px;
  background: rgba(0, 73, 230, .07);
  box-shadow: inset 0 0 0 1px rgba(0, 73, 230, .1);
}
.trip-benefit-card h3 { margin: 18px 0 8px; font-size: 17.5px; line-height: 1.32; letter-spacing: -.005em; }

.trip-audience { background: #fff; }
.trip-audience-head { gap: clamp(32px, 4vw, 56px); }

.trip-statement { background: var(--mist); border-color: var(--line); }
.trip-statement blockquote { font-size: clamp(25px, 3.4vw, 40px); line-height: 1.32; }

/* Konzeptkacheln auf Navy */
.trip-pillar-card {
  padding: clamp(22px, 2.2vw, 28px);
  border-color: rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .035);
  border-radius: var(--radius);
}
.trip-pillar-card.is-highlight { border-color: rgba(232, 255, 0, .42); background: rgba(232, 255, 0, .055); }
.trip-pillar-number { color: rgba(232, 255, 0, .34); font-size: 38px; }
.trip-pillar-card h3 { margin: 14px 0 9px; font-size: 17.5px; letter-spacing: -.005em; }
.trip-chip { border-color: rgba(232, 255, 0, .38); font-size: 10.5px; letter-spacing: .08em; }
.trip-concept::after { border-color: rgba(232, 255, 0, .2); }

.trip-anchor-bar {
  margin-top: var(--gap-card);
  padding: clamp(20px, 2.2vw, 26px) clamp(22px, 2.4vw, 30px);
  border-radius: var(--radius);
  gap: clamp(18px, 2vw, 26px);
  background: var(--neon);
  box-shadow: 0 20px 50px -30px rgba(199, 223, 0, .9);
}
.trip-anchor-icon { width: 48px; height: 48px; }
.trip-anchor-bar h3 { font-size: 26px; letter-spacing: .035em; }
.trip-anchor-bar p { font-weight: 600; line-height: 1.58; }

/* --------------------------------------------------------------------------
   6 · Reisekarten: weniger Masse, mehr Bildwirkung
   -------------------------------------------------------------------------- */
.trip-date-card {
  border-color: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .34s cubic-bezier(.2,.7,.2,1), box-shadow .34s ease, border-color .34s ease;
}
.trip-date-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.trip-date-card.is-sold-out { background: #f2f2f5; box-shadow: none; }
.trip-date-card.is-sold-out:hover { transform: none; box-shadow: none; }
.trip-date-card.is-sold-out .trip-date-image-wrap img { filter: grayscale(1) saturate(.3) contrast(1.02); opacity: .58; }

.trip-date-image-wrap {
  height: auto;
  aspect-ratio: 4 / 3;
  background: var(--night);
}
.trip-date-image-wrap img { transition: transform .8s cubic-bezier(.16,.8,.2,1); }
.trip-date-card:hover img { transform: scale(1.035); }
.trip-date-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 18, 32, .2) 0%, rgba(11, 18, 32, 0) 38%, rgba(11, 18, 32, .16) 100%);
  box-shadow: inset 0 -1px 0 rgba(32, 36, 73, .12);
}
.trip-date-location,
.trip-soldout-badge {
  left: 16px; top: 16px;
  padding: 7px 12px;
  font-size: 10px;
  letter-spacing: .13em;
  box-shadow: 0 6px 18px -8px rgba(11, 18, 32, .6);
}
.trip-soldout-badge { left: auto; right: 16px; background: rgba(11, 18, 32, .92); backdrop-filter: blur(6px); }

.trip-date-body { padding: clamp(22px, 2.3vw, 28px); }
.trip-date-body h3 { font-size: 36px; letter-spacing: .02em; }
.trip-price strong { font-size: 36px; letter-spacing: .01em; }
.trip-fact { background: var(--mist); box-shadow: inset 0 0 0 1px rgba(32, 36, 73, .05); font-size: 11px; }
.trip-fact--included { box-shadow: inset 0 0 0 1px rgba(199, 223, 0, .5); }
.trip-inclusions { border-color: var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-sm); }
.trip-inclusions summary::after { background: var(--mist); }
.trip-inclusions-list li { color: var(--ink-soft); font-size: 11.5px; line-height: 1.55; }
.trip-date-actions { margin-top: 22px; }

.trip-application-note {
  border-color: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: clamp(22px, 2.4vw, 28px);
}
.trip-waitlist-note { color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   7 · Wochenplan: ruhigeres Raster
   -------------------------------------------------------------------------- */
.trip-week-shell {
  border-color: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.trip-week-table th,
.trip-week-table td { border-color: rgba(32, 36, 73, .08); }
.trip-week-table thead th { letter-spacing: .12em; }
.trip-week-table td { background: rgba(255, 255, 255, .92); }
.trip-week-time { box-shadow: 8px 0 20px -14px rgba(32, 36, 73, .5); }
.trip-week-activity {
  border-color: rgba(32, 36, 73, .1);
  border-radius: 11px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s cubic-bezier(.2,.7,.2,1), border-color .2s ease, box-shadow .2s ease;
}
.trip-week-activity:hover,
.trip-week-activity:focus-visible { box-shadow: 0 10px 24px -12px rgba(0, 73, 230, .55); }
.trip-week-activity small { color: var(--ink-soft); }
.trip-week-legend span { border-color: var(--line); color: var(--ink-soft); }
.trip-week-hint { color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   8 · Overlays
   -------------------------------------------------------------------------- */
.trip-modal { background: rgba(7, 12, 27, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.trip-modal-panel {
  border-color: rgba(255, 255, 255, .28);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, .7);
}
.trip-modal-close { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.trip-details-summary { padding: clamp(30px, 3.4vw, 50px) clamp(22px, 3vw, 42px) clamp(26px, 2.6vw, 36px); }
.trip-details-content { padding: clamp(26px, 2.8vw, 34px) clamp(22px, 3vw, 42px) clamp(30px, 3.2vw, 44px); border-top-color: var(--line); }
.trip-itinerary-row { background: rgba(32, 36, 73, .04); border-radius: 11px; }
.trip-activity-copy { padding: clamp(30px, 3.6vw, 56px) clamp(22px, 3vw, 46px) clamp(32px, 3vw, 44px); }
.trip-activity-copy p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; }
.trip-activity-visual::after { background: linear-gradient(180deg, rgba(11, 18, 32, .1) 0%, transparent 42%, rgba(11, 18, 32, .6) 100%); }

/* --------------------------------------------------------------------------
   9 · Footer / Hub
   -------------------------------------------------------------------------- */
.trip-hub::before { opacity: .34; animation-duration: 26s; }
.trip-footer { border-top-color: rgba(255, 255, 255, .09); }
.trip-footer-links a:hover { color: var(--neon); }

/* --------------------------------------------------------------------------
   10 · Motion: Zeilen-Reveal + ruhige Karten-Einblendung
   Textzeilen sind ohne JS sichtbar; animiert wird nur nach Initialisierung.
   -------------------------------------------------------------------------- */
.elevation-line { display: block; }
html.elevation-motion-ready .elevation-line-mask { display: block; overflow: hidden; }
html.elevation-motion-ready .elevation-line {
  transform: translateY(105%);
  opacity: 0;
  animation: elevationLineIn 700ms cubic-bezier(.19, .84, .2, 1) forwards;
  animation-delay: var(--line-delay, 0ms);
}
@keyframes elevationLineIn {
  from { transform: translateY(105%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

html.elevation-motion-ready [data-elev-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
html.elevation-motion-ready [data-elev-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   11 · Responsiv: Desktopraster bleibt, mobil natürlich stapeln
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .trip-benefit-grid,
  .trip-pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .trip-date-grid { grid-template-columns: 1fr; }
  .trip-date-image-wrap { aspect-ratio: 16 / 10; }
}
@media (max-width: 680px) {
  .trip-hero { min-height: 640px; }
  .trip-hero-subline { font-size: 16.5px; }
  .trip-benefit-grid,
  .trip-pillar-grid { grid-template-columns: 1fr; }
  .trip-date-body h3,
  .trip-price strong { font-size: 32px; }
  .trip-statement blockquote { font-size: 25px; }
  .trip-anchor-bar { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .trip-container, .trip-header-inner { width: min(100% - 28px, 1180px); }
  .trip-date-image-wrap { aspect-ratio: 3 / 2; }
}

/* Touchflächen nie unter 44px */
.trip-nav > a.trip-nav-cta,
.trip-button,
.trip-menu-toggle,
.trip-modal-close,
.trip-inclusions summary { min-height: 44px; }
.trip-inclusions summary { padding: 11px 14px; }

/* --------------------------------------------------------------------------
   12 · Reduced Motion: alles statisch und sichtbar
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.elevation-motion-ready .trip-hero-image { animation: none; transform: scale(1.02); }
  html.elevation-motion-ready .elevation-line { transform: none; opacity: 1; animation: none; }
  html.elevation-motion-ready [data-elev-reveal] { opacity: 1; transform: none; transition: none; }
  .trip-hub::before { animation: none; }
}