/*
Theme Name: Hello Elementor Child — Nordsee
Description: Child-Theme für Ihr Nordseeurlaub × Ihr Nordseemakler. Zentrale Design-Tokens (Farben, Schriften, Radien) als CSS-Variablen — alle 41 mitgelieferten Elementor-Templates referenzieren diese Variablen. Farben & Schriften ändern: entweder hier unter :root oder bequem im Customizer (Design → Customizer → Nordsee Design).
Author: Ihr Nordseeurlaub
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child-nordsee
*/

/* ═══════════════════════════════════════════════════════════════════
   DESIGN-TOKENS — die einzige Stelle, an der Marke definiert wird.
   Jede Farbe/Schrift hier ändert ALLE Seiten gleichzeitig, weil die
   Elementor-Templates var(--nu-…) statt fester Werte verwenden.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* Primärfarben */
  --nu-blue:       #436573;  /* Albastru sec — Header, Footer, Bänder */
  --nu-blue-mid:   #5F818D;  /* Sekundärflächen */
  --nu-blue-pale:  #E7EEEF;  /* Helle Hintergrundflächen */

  /* Akzent (Sandgold — abgestimmt auf das SVG-Icon-Set) */
  --nu-gold:       #EFA948;
  --nu-gold-dark:  #D18F2F;
  --nu-gold-light: #F5C46B;

  /* Neutrals */
  --nu-sand:       #F1E7D6;
  --nu-sand-dark:  #E3D3B4;
  --nu-paper:      #FBF7EF;
  --nu-ink:        #1C2B2E;
  --nu-ink-soft:   #4B5D60;

  /* Typografie-Rollen (beliebige CSS-font-family-Stacks) */
  --nu-font-display: Georgia, 'Palatino Linotype', serif;
  --nu-font-text:    Arial, 'Segoe UI', sans-serif;

  /* Radien */
  --nu-radius-lg: 28px;
  --nu-radius-md: 18px;
  --nu-radius-sm: 12px;
}

/* Basis-Typografie (greift überall dort, wo kein Widget-Wert gesetzt ist) */
body {
  font-family: var(--nu-font-text);
  color: var(--nu-ink);
  background-color: var(--nu-paper);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--nu-font-display);
  color: var(--nu-ink);
}
a { color: var(--nu-blue); }
::selection { background: var(--nu-gold); color: #fff; }

/* ═══════════════════════════════════════════════════════════════════
   INTERAKTIONS-EFFEKTE (MagicBento/SpotlightCard-Stil)
   Klassen werden von den Templates gesetzt: .lift, .magic-bento,
   .magic-bento-card — kein Custom-Code-Snippet mehr nötig.
   ═══════════════════════════════════════════════════════════════════ */
.lift { transition: transform .35s ease, box-shadow .35s ease; }

@media (hover: hover) and (min-width: 768px) {
  .lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px -28px rgba(67, 101, 115, .45);
  }
  .magic-bento-card { position: relative; --gx: 50%; --gy: 50%; --gi: 0; }
  .magic-bento-card::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    opacity: var(--gi);
    transition: opacity .3s ease;
    background: radial-gradient(240px circle at var(--gx) var(--gy),
      rgba(239, 169, 72, .45) 0%,
      rgba(239, 169, 72, .18) 35%,
      transparent 65%);
    background: radial-gradient(240px circle at var(--gx) var(--gy),
      color-mix(in srgb, var(--nu-gold) 45%, transparent) 0%,
      color-mix(in srgb, var(--nu-gold) 18%, transparent) 35%,
      transparent 65%);
    padding: 2px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lift { transition: none; }
  .lift:hover { transform: none; }
  .magic-bento-card::after { display: none; }
}

/* ═══ Karussell (.nu-carousel) — Scroll-Snap + Pfeile (JS) ═══════════════ */
.nu-carousel-wrap { position: relative; width: 100%; }
.nu-carousel {
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
}
.nu-carousel::-webkit-scrollbar { display: none; }
.nu-carousel.nu-dragging { cursor: grabbing; scroll-snap-type: none; }
.nu-carousel > .e-con, .nu-carousel > div {
  flex: 0 0 31% !important;
  min-width: 260px;
  scroll-snap-align: start;
}
@media (max-width: 767px) {
  .nu-carousel > .e-con, .nu-carousel > div { flex-basis: 85% !important; }
}
.nu-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--nu-gold); background: #fff; color: var(--nu-ink);
  font-size: 22px; line-height: 1; cursor: pointer; z-index: 5;
  transition: background .25s ease, color .25s ease;
}
.nu-arrow:hover { background: var(--nu-blue); border-color: var(--nu-blue); color: #fff; }
.nu-arrow-prev { left: -10px; }
.nu-arrow-next { right: -10px; }

/* ═══ Stepper (.nu-stepper) — React-Bits-Look ════════════════════════════ */
.nu-stepper-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin: 0 auto 28px; max-width: 720px; width: 100%;
}
.nu-dot {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  border: 2px solid var(--nu-sand-dark); background: #fff;
  color: var(--nu-ink-soft); font-weight: 700; font-size: 15px;
  cursor: pointer; transition: all .3s ease;
  font-family: var(--nu-font-text);
}
.nu-dot.is-active {
  background: var(--nu-gold); border-color: var(--nu-gold); color: #fff;
  transform: scale(1.12);
  box-shadow: 0 8px 20px -8px var(--nu-gold);
}
.nu-dot.is-done { background: var(--nu-blue); border-color: var(--nu-blue); color: #fff; }
.nu-line {
  height: 2px; flex: 1; max-width: 90px;
  background: var(--nu-sand-dark); position: relative; overflow: hidden;
}
.nu-line::after {
  content: ""; position: absolute; inset: 0;
  background: var(--nu-blue); transform: scaleX(0); transform-origin: left;
  transition: transform .4s ease;
}
.nu-line.is-done::after { transform: scaleX(1); }
.nu-stepper > .e-con, .nu-stepper > div {
  opacity: .55; transform: translateY(4px) scale(.985);
  transition: opacity .35s ease, transform .35s ease, box-shadow .35s ease;
  cursor: pointer;
}
.nu-stepper > .nu-step-active {
  opacity: 1; transform: none;
  box-shadow: 0 24px 60px -28px rgba(67, 101, 115, .4);
}

/* ═══ Karten-Pins (.nu-pin) — klickbare Orte auf der Karte ═══════════════ */
.nu-pin {
  box-shadow: 0 6px 18px -6px rgba(28, 43, 46, .45);
  transition: transform .25s ease, box-shadow .25s ease;
}
.nu-pin::before {
  content: ""; position: absolute; left: 50%; bottom: -7px;
  width: 12px; height: 12px; background: var(--nu-gold);
  border-radius: 50%; transform: translateX(-50%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--nu-gold) 30%, transparent);
  animation: nu-pulse 2.2s ease-out infinite;
}
@keyframes nu-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nu-gold) 45%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}
.nu-pin:hover { transform: translateY(-3px) scale(1.06); z-index: 10; }
@media (prefers-reduced-motion: reduce) { .nu-pin::before { animation: none; } }

/* ═══ Magazine-Typografie (Ort-Seiten) ═══════════════════════════════════ */
.nu-mag-number h6 {
  font-size: 44px !important; line-height: 1;
  color: var(--nu-sand-dark) !important;
  font-family: var(--nu-font-display) !important;
}
.nu-pullquote p {
  font-family: var(--nu-font-display); font-style: italic;
  font-size: 21px; line-height: 1.45; color: var(--nu-blue);
  border-left: 3px solid var(--nu-gold); padding-left: 18px;
}