/* ============================================================
   FAMILIEN-NAVIGATOR — MARKENSYSTEM (brand.css)
   Eine additive Designsystem-Ebene. Definiert Tokens, das
   Leitmotiv „Der Orientierungspfad", die Icon-Familie, das
   Karten- & Button-System und die Motion-DNA.
   Additiv gedacht: fügt Tokens & neue Komponentenklassen hinzu,
   überschreibt bestehende Layouts nicht.
   ============================================================ */

:root{
  /* — Markenfarben (Design-DNA) — */
  --fn-pine:#082E2F;        /* Pinie – Tiefe, Ruhe, Vertrauen   */
  --fn-pine-2:#0C3A3B;
  --fn-ink-soft:#304946;
  --fn-cream:#FAF4E8;       /* Cream – Wärme, Papier, Weißraum  */
  --fn-cream-hi:#FFFDF8;
  --fn-sand:#F2DFC3;        /* Sand – warmer Grund              */
  --fn-terra:#D8583B;       /* Terrakotta – der Pfad, der Akzent*/
  --fn-terra-2:#E06A48;
  --fn-terra-ink:#A8432B;
  --fn-sage:#E4ECE5;        /* Salbei – ruhige Fläche           */
  --fn-sage-2:#D6E2D8;
  --fn-dim:#54655F;
  --fn-line:rgba(8,46,47,.12);
  --fn-line-hi:rgba(250,244,232,.16);

  /* — Verläufe — */
  --fn-grad-warm:linear-gradient(135deg,#F7ECD8 0%,#F2DFC3 100%);
  --fn-grad-pine:linear-gradient(160deg,#0C3A3B 0%,#082E2F 70%);
  --fn-grad-terra:linear-gradient(135deg,#E06A48 0%,#C24A2E 100%);
  --fn-glow-terra:radial-gradient(60% 60% at 50% 40%,rgba(216,88,59,.16),transparent 70%);

  /* — Radien (weich, editorial) — */
  --fn-r-xs:8px; --fn-r-s:12px; --fn-r-m:16px; --fn-r-l:22px; --fn-r-xl:28px; --fn-r-pill:999px;

  /* — Schatten (lang, diffus, leise) — */
  --fn-sh-1:0 2px 10px -6px rgba(8,46,47,.30);
  --fn-sh-2:0 14px 34px -20px rgba(8,46,47,.34);
  --fn-sh-3:0 30px 70px -40px rgba(8,46,47,.42);
  --fn-sh-terra:0 18px 40px -22px rgba(194,74,46,.42);

  /* — Raster & Rhythmus — */
  --fn-sp:clamp(20px,3.4vw,34px);
  --fn-ease:cubic-bezier(.19,1,.22,1);
  --fn-ease-soft:cubic-bezier(.33,.9,.28,1);
  --fn-dur:.9s;
}

/* ============================================================
   LEITMOTIV — „Der Orientierungspfad"
   Eine fein gezeichnete Route mit Wegpunkten. Zieht sich als
   wiederkehrendes Zeichen durch die Marke. Zeichnet sich beim
   Scrollen. Reduziert bei prefers-reduced-motion.
   ============================================================ */
.fn-path{display:block;width:100%;height:auto;overflow:visible}
.fn-path .trail{
  fill:none;stroke:var(--fn-terra);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);
  transition:stroke-dashoffset 2.2s var(--fn-ease);
}
.fn-path.drawn .trail{stroke-dashoffset:0}
.fn-path .ghost{fill:none;stroke:var(--fn-line);stroke-width:2;stroke-linecap:round;stroke-dasharray:2 8}
.fn-path .wp{fill:var(--fn-cream-hi);stroke:var(--fn-terra);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.2);transition:opacity .5s var(--fn-ease),transform .6s var(--fn-ease)}
.fn-path.drawn .wp{opacity:1;transform:scale(1)}
.fn-path.drawn .wp:nth-of-type(2){transition-delay:.5s}
.fn-path.drawn .wp:nth-of-type(3){transition-delay:1s}
.fn-path.drawn .wp:nth-of-type(4){transition-delay:1.5s}
.fn-path.drawn .wp:nth-of-type(5){transition-delay:2s}
.fn-path .wp-core{fill:var(--fn-terra)}

/* schlanke Trennlinie mit Wegpunkt – Abschnitts-Verbinder */
.fn-rule{display:flex;align-items:center;gap:14px;color:var(--fn-line);margin:var(--fn-sp) 0}
.fn-rule::before,.fn-rule::after{content:"";height:1px;flex:1;background:currentColor}
.fn-rule i{width:9px;height:9px;border-radius:50%;border:2px solid var(--fn-terra);background:var(--fn-cream);flex:0 0 auto}

/* ============================================================
   ICON-FAMILIE
   Einheitlicher Strich (1.75), runde Enden, 24er-Raster,
   plus EIN Terrakotta-Wegpunkt je Icon (das verbindende Zeichen).
   ============================================================ */
/* Vererbte Paint-Eigenschaften (queren die <use>-Shadow-Grenze) */
.fn-ic{width:28px;height:28px;display:inline-block;vertical-align:middle;color:var(--fn-pine);
  fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.fn-ic svg,.fn-ic use{width:100%;height:100%}
.fn-ic .s{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.fn-ic .wp{fill:var(--fn-terra);stroke:none}      /* Wegpunkt-Akzent (inline-Nutzung) */
.fn-ic-lg{width:44px;height:44px}
.fn-ic-tile{width:56px;height:56px;border-radius:var(--fn-r-m);display:inline-flex;align-items:center;justify-content:center;background:var(--fn-cream-hi);border:1px solid var(--fn-line);box-shadow:var(--fn-sh-1)}
.fn-ic-tile .fn-ic{width:30px;height:30px}

/* ============================================================
   KARTEN- & BUTTON-SYSTEM
   ============================================================ */
.fn-card{background:var(--fn-cream-hi);border:1px solid var(--fn-line);border-radius:var(--fn-r-l);
  padding:26px 24px;box-shadow:var(--fn-sh-2);transition:transform .5s var(--fn-ease),box-shadow .5s var(--fn-ease)}
.fn-card:hover{transform:translateY(-3px);box-shadow:var(--fn-sh-3)}
.fn-card--pine{background:var(--fn-grad-pine);color:var(--fn-cream);border-color:transparent}

.fn-btn{--b:var(--fn-terra);display:inline-flex;align-items:center;gap:10px;font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-weight:650;font-size:16px;line-height:1;padding:15px 24px;border-radius:var(--fn-r-pill);border:0;cursor:pointer;
  color:#fff;background:var(--fn-grad-terra);box-shadow:var(--fn-sh-terra);text-decoration:none;
  transition:transform .4s var(--fn-ease),box-shadow .4s var(--fn-ease)}
.fn-btn:hover{transform:translateY(-2px);box-shadow:0 24px 50px -24px rgba(194,74,46,.55)}
.fn-btn .arw{transition:transform .4s var(--fn-ease)}
.fn-btn:hover .arw{transform:translateX(4px)}
.fn-btn--ghost{background:transparent;color:var(--fn-pine);box-shadow:none;border:1.5px solid var(--fn-line)}
.fn-btn--ghost:hover{border-color:var(--fn-terra);background:var(--fn-cream-hi)}

/* ============================================================
   MOTION-DNA — ruhig, expo-out. „rise" beim Erscheinen.
   ============================================================ */
.fn-rise{opacity:0;transform:translateY(18px);transition:opacity .9s var(--fn-ease),transform .9s var(--fn-ease)}
.fn-rise.in{opacity:1;transform:none}
.fn-rise.d1{transition-delay:.08s}.fn-rise.d2{transition-delay:.16s}.fn-rise.d3{transition-delay:.24s}.fn-rise.d4{transition-delay:.32s}

@media (prefers-reduced-motion:reduce){
  .fn-path .trail{transition:none;stroke-dashoffset:0}
  .fn-path .wp{transition:none;opacity:1;transform:none}
  .fn-rise{transition:none;opacity:1;transform:none}
  .fn-card{transition:none}
}

/* ============================================================
   SIGNATURBAND — der Orientierungspfad als Abschnitts-Moment
   (dezent wiederkehrend, mit inhaltlicher Funktion)
   ============================================================ */
.fn-sigband{background:var(--fn-cream);padding:clamp(34px,5.5vw,64px) 0;border-block:1px solid var(--fn-line);position:relative;overflow:hidden}
.fn-sigband .fn-in{width:min(1120px,92vw);margin:0 auto;text-align:center}
.fn-sigband .lead{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:clamp(20px,2.3vw,28px);color:var(--fn-pine);margin:0 0 6px;letter-spacing:-.01em}
.fn-sigband .cap{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--fn-terra-ink);font-weight:650;margin-bottom:20px}

/* — Beschriftete Journey (Signaturband mit Icons & Worten) — */
.fn-journey{position:relative;display:flex;justify-content:space-between;gap:20px;max-width:900px;margin:36px auto 0}
.fn-journey::before{content:"";position:absolute;top:33px;left:14%;right:14%;height:2px;
  background:linear-gradient(90deg,var(--fn-terra),var(--fn-terra-2));opacity:.85;border-radius:2px}
.fj-stop{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:250px}
.fj-dot{width:68px;height:68px;border-radius:50%;background:var(--fn-cream-hi);border:2px solid var(--fn-terra);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--fn-sh-1)}
.fj-dot .fn-ic{width:32px;height:32px;color:var(--fn-pine)}
.fj-stop b{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:20px;margin-top:15px;color:var(--fn-pine)}
.fj-stop small{font-size:13.5px;color:var(--fn-ink-soft);margin-top:6px;line-height:1.45;max-width:24ch}
@media(max-width:720px){
  .fn-journey{flex-direction:column;align-items:center;gap:24px}
  .fn-journey::before{left:50%;top:10%;bottom:10%;right:auto;width:2px;height:auto;transform:translateX(-50%);background:linear-gradient(180deg,var(--fn-terra),var(--fn-terra-2))}
}

/* — Signaturband: dunkle Variante (Pinie) — */
.fn-sigband.fn-dark{background:var(--fn-grad-pine);border-color:transparent}
.fn-sigband.fn-dark .cap{color:var(--fn-terra-2)}
.fn-sigband.fn-dark .lead{color:var(--fn-cream)}
.fn-sigband.fn-dark .fj-stop b{color:var(--fn-cream)}
.fn-sigband.fn-dark .fj-stop small{color:rgba(250,244,232,.72)}
.fn-sigband.fn-dark .fj-dot{background:var(--fn-cream-hi);border-color:var(--fn-terra-2)}