/* ============================================================
     ZELTPLATZ-FOOTER IN DPSG-BLAU
     Alles strikt unter .ft gescopet – keine globalen Styles,
     nichts beeinflusst den Rest der Seite.
     ============================================================ */
  .ft {
    /* ---------- Farbpalette: hier zentral anpassen ---------- */
    --ft-himmel-oben: #3f92dd;    /* helles Tagblau oben */
    --ft-himmel-unten: #1d6cbe;   /* sattes DPSG-Blau unten */
    --ft-boden: #10457e;          /* dunkles Blau für die Bodenzeile */
    --ft-silhouette: #1d6cbe;     /* Farbe der Zeltplatz-Kante (= Himmel oben) */
    --ft-hell: #ffffff;           /* Haupttextfarbe */
    --ft-hell-dim: rgba(255, 255, 255, 0.72);
    --ft-lilie: #e8493d;          /* DPSG-Rot, auf Blau etwas heller */
    --ft-feuer: #f2a03d;          /* Feuer-Orange */
    --ft-glut: #ffd27a;           /* helles Glut-Gelb */
    --ft-gruen: #62b569;          /* Pfadistufe – für die Wimpel */
    --ft-orange: #f08a3c;         /* Wö-Stufe – für die Wimpel */
    --ft-linie: rgba(255, 255, 255, 0.28);
    position: relative;
    color: var(--ft-hell);
  }
  .ft *, .ft *::before, .ft *::after { box-sizing: border-box; }

  /* ---------- Silhouetten-Kante: Tannen · Kohten · Michel ----------
     Liegt transparent auf dem Seitenhintergrund und "wächst"
     in Himmelblau nach oben in den Inhalt hinein. */
  .ft-kante { display: block; width: 100%; height: 90px; margin-bottom: -1px; }

  /* ---------- Himmel ---------- */
  .ft-himmel {
    position: relative;
    background: linear-gradient(180deg, var(--ft-himmel-oben) 0%, var(--ft-himmel-unten) 72%);
    overflow: hidden;
    padding: 34px 24px 0;
  }

  /* ---------- Wolken: ziehen gemächlich von links nach rechts ----------
     Reine CSS-Formen (Blob aus drei Kreisen), kein Bild nötig. */
  .ft-wolke {
    position: absolute;
    top: 0;
    left: -220px;
    width: 150px; height: 40px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 40px;
    filter: blur(1px);
    animation: ft-ziehen linear infinite;
    pointer-events: none;
  }
  .ft-wolke::before, .ft-wolke::after {
    content: '';
    position: absolute;
    background: inherit;
    border-radius: 50%;
  }
  .ft-wolke::before { width: 62px; height: 62px; top: -28px; left: 24px; }
  .ft-wolke::after  { width: 44px; height: 44px; top: -18px; right: 26px; }

  .ft-wolke.w1 { top: 8%;  transform: scale(1);    animation-duration: 68s; animation-delay: -12s; opacity: 0.85; }
  .ft-wolke.w2 { top: 20%; transform: scale(0.65); animation-duration: 95s; animation-delay: -48s; opacity: 0.6; }
  .ft-wolke.w3 { top: 4%;  transform: scale(0.8);  animation-duration: 80s; animation-delay: -70s; opacity: 0.7; }

  @keyframes ft-ziehen {
    from { left: -260px; }
    to   { left: 110%; }
  }

  /* ---------- Wimpelkette: hängt oben durch und schwingt sacht ----------
     Wimpel in den vier DPSG-Stufenfarben + Weiß. */
  .ft-wimpelkette {
    position: absolute;
    top: -6px;
    left: 0;
    width: 100%;
    height: 70px;
    pointer-events: none;
    overflow: visible;
  }
  .ft-wimpelkette svg { width: 100%; height: 100%; overflow: visible; }
  .ft-wimpel-schwung {
    transform-origin: 50% 0;
    animation: ft-schwingen 5.5s ease-in-out infinite alternate;
  }
  @keyframes ft-schwingen {
    from { transform: rotate(-0.6deg); }
    to   { transform: rotate(0.6deg); }
  }

  /* ---------- Inhalt: 4 Spalten ---------- */
  .ft-inhalt {
    position: relative;
    max-width: 1460px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.15fr 1fr 0.8fr 1fr;
    gap: 44px;
    padding: 48px 0 46px;   /* oben Platz für die Wimpelkette */
  }

  .ft-titel {
    font-family: 'Staatliches', sans-serif;
    font-size: clamp(1.1rem, 1.5vw, 1.7rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ft-glut);
    margin: 0 0 16px;
  }

  /* --- Spalte 1: Stamm & Lagerfeuer --- */
  .ft-stamm-name {
    font-family: 'Staatliches', sans-serif;
    font-size: clamp(1.9rem, 2.7vw, 3.4rem);
    letter-spacing: 0.05em;
    line-height: 1.05;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  }
  .ft-stamm-name span { color: var(--ft-glut); }
  .ft-stamm-ort { color: var(--ft-hell-dim); font-size: clamp(0.95rem, 1.15vw, 1.3rem); margin: 6px 0 0; }

  /* Lagerfeuer – klickbar, lodert beim Anfachen auf */
  .ft-feuerplatz {
    position: relative;
    width: clamp(150px, 12vw, 210px); height: clamp(130px, 10.4vw, 182px);
    margin-top: 18px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .ft-feuerplatz svg { width: 100%; height: 100%; overflow: visible; }
  .ft-flamme {
    transform-origin: 50px 78px;
    animation: ft-flackern 0.75s ease-in-out infinite alternate;
  }
  .ft-flamme.f2 { animation-duration: 0.6s; animation-delay: 0.12s; }
  .ft-flamme.f3 { animation-duration: 0.5s; animation-delay: 0.24s; }
  @keyframes ft-flackern {
    from { transform: scaleY(1) scaleX(1) rotate(-1deg); }
    to   { transform: scaleY(1.16) scaleX(0.93) rotate(1.5deg); }
  }
  .ft-feuerplatz.lodert .ft-flamme { animation-duration: 0.32s; }
  .ft-feuerplatz.lodert svg { filter: brightness(1.18) drop-shadow(0 0 16px rgba(255, 210, 122, 0.6)); }

  /* Funken steigen auf und verglühen */
  .ft-funke {
    position: absolute;
    bottom: 46px; left: 50%;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--ft-glut);
    opacity: 0;
    animation: ft-steigen 2.6s ease-out infinite;
    pointer-events: none;
  }
  .ft-funke:nth-child(1) { animation-delay: 0s;    --dx: -26px; }
  .ft-funke:nth-child(2) { animation-delay: 0.5s;  --dx: 18px;  }
  .ft-funke:nth-child(3) { animation-delay: 1.0s;  --dx: -8px;  }
  .ft-funke:nth-child(4) { animation-delay: 1.5s;  --dx: 30px;  }
  .ft-funke:nth-child(5) { animation-delay: 2.0s;  --dx: -20px; }
  @keyframes ft-steigen {
    0%   { opacity: 0;    transform: translate(0, 0) scale(1); }
    12%  { opacity: 0.95; }
    100% { opacity: 0;    transform: translate(var(--dx), -105px) scale(0.35); }
  }
  .ft-feuer-tipp {
    font-size: clamp(0.78rem, 0.9vw, 1rem);
    color: var(--ft-hell-dim);
    margin-top: 2px;
    opacity: 0.85;
  }

  /* --- Spalte 2: Zitat --- */
  .ft-zitat {
    border-left: 3px solid var(--ft-glut);
    padding-left: 18px;
    font-style: italic;
    font-size: clamp(1.05rem, 1.3vw, 1.55rem);
    line-height: 1.65;
    margin: 0;
    color: var(--ft-hell);
  }
  .ft-zitat footer {
    margin-top: 10px;
    font-style: normal;
    font-size: clamp(0.9rem, 1.1vw, 1.25rem);
    color: var(--ft-glut);
  }

  /* --- Spalte 3: Wegweiser (Quick Links) ---
     Hover: eine gestrichelte "Wanderroute" wächst unterm Link entlang. */
  .ft-wege { list-style: none; margin: 0; padding: 0; }
  .ft-wege li { margin: 0 0 4px; }
  .ft-wege a {
    display: inline-block;
    color: var(--ft-hell);
    text-decoration: none;
    font-size: clamp(1rem, 1.25vw, 1.45rem);
    padding: 6px 0;
    position: relative;
    transition: color 0.18s ease, transform 0.18s ease;
  }
  .ft-wege a::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background-image: linear-gradient(90deg, var(--ft-glut) 55%, transparent 45%);
    background-size: 8px 1px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.28s ease;
  }
  .ft-wege a:hover, .ft-wege a:focus-visible { color: var(--ft-glut); transform: translateX(4px); }
  .ft-wege a:hover::after, .ft-wege a:focus-visible::after { transform: scaleX(1); }

  /* --- Spalte 4: Kompass-Teaser & Social --- */
  .ft-kompass {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid var(--ft-linie);
    border-radius: 6px;
    padding: 14px 16px;
    text-decoration: none;
    color: var(--ft-hell);
    transition: border-color 0.2s ease, background 0.2s ease;
  }
  .ft-kompass:hover, .ft-kompass:focus-visible {
    border-color: var(--ft-glut);
    background: rgba(255, 255, 255, 0.16);
  }
  .ft-kompass svg { width: clamp(50px, 4.2vw, 76px); height: clamp(50px, 4.2vw, 76px); flex-shrink: 0; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .ft-kompass:hover svg { transform: rotate(360deg); }
  .ft-kompass strong { font-family: 'Staatliches', sans-serif; letter-spacing: 0.06em; font-weight: 400; font-size: clamp(1.15rem, 1.45vw, 1.7rem); display: block; }
  .ft-kompass small { color: var(--ft-hell-dim); font-size: clamp(0.85rem, 1.05vw, 1.2rem); line-height: 1.4; display: block; margin-top: 2px; }

  .ft-social { display: flex; gap: 10px; margin-top: 18px; }
  .ft-social a {
    width: clamp(44px, 3.6vw, 60px); height: clamp(44px, 3.6vw, 60px);
    border-radius: 50%;
    border: 1px solid var(--ft-linie);
    display: grid;
    place-items: center;
    color: var(--ft-hell);
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, background 0.2s ease;
  }
  .ft-social a:hover, .ft-social a:focus-visible {
    border-color: var(--ft-glut);
    color: var(--ft-glut);
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-3px);
  }
  .ft-social svg { width: 45%; height: 45%; fill: currentColor; }

  /* ---------- Bodenzeile ---------- */
  .ft-boden {
    position: relative;
    background: var(--ft-boden);
    padding: 14px 24px;
  }
  .ft-boden-inner {
    max-width: 1460px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: clamp(0.85rem, 1vw, 1.15rem);
    color: var(--ft-hell-dim);
  }
  .ft-boden a { color: var(--ft-hell-dim); text-decoration: none; }
  .ft-boden a:hover { color: var(--ft-glut); }
  .ft-boden .gutpfad { color: var(--ft-glut); font-family: 'Staatliches', sans-serif; letter-spacing: 0.1em; }

  /* ---------- Responsive ---------- */
  @media (max-width: 980px) {
    .ft-inhalt { grid-template-columns: 1fr 1fr; gap: 36px; }
  }
  @media (max-width: 560px) {
    .ft-inhalt { grid-template-columns: 1fr; gap: 30px; padding-top: 56px; }
    .ft-kante { height: 56px; }
  }

  /* ---------- Barrierefreiheit: reduzierte Bewegung ---------- */
  @media (prefers-reduced-motion: reduce) {
    .ft-flamme, .ft-funke, .ft-wolke, .ft-wimpel-schwung { animation: none !important; }
    .ft-funke { display: none; }
    .ft-kompass:hover svg { transform: none; }
  }

  /* ============================================================
     OCEANWP-INTEGRATION
     Nur nötig, wenn der Footer als Custom-HTML-Widget in
     "Footer 1" eingebaut wird (Weg 1). Beim Einbau über den
     ocean_after_footer-Hook (Weg 2) kann dieser Block bleiben –
     er stört dort nicht, greift nur einfach nicht.
     ============================================================ */
  /* Footer aus dem begrenzten Container auf volle Fensterbreite ziehen */
  #footer-widgets .ft {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
  /* OceanWP-Innenabstände rund ums Widget entfernen */
  #footer-widgets .container { max-width: 100% !important; padding: 0 !important; }
  #footer-widgets .footer-widget,
  #footer-widgets .footer-box { padding: 0 !important; margin: 0 !important; }
  #footer-widgets { padding: 0 !important; }

/* ============================================================
     NACHTMODUS – wird aktiv, sobald der <body> die Klasse
     .ft-nachtmodus trägt (Zuweisung pro Seite über die
     functions.php, siehe dort). Gleiches HTML, andere Stimmung:
     Nachthimmel, Sterne, gedimmte Wolken, Feuerschein.
     ============================================================ */
 
  /* Palette umfärben: Tagblau -> Nachtblau */
  body.ft-nachtmodus .ft {
    --ft-himmel-oben: #0d1826;
    --ft-himmel-unten: #122032;
    --ft-boden: #0a1420;
    --ft-hell-dim: rgba(255, 255, 255, 0.66);
    --ft-linie: rgba(255, 255, 255, 0.2);
  }
 
  /* Silhouetten-Kante ebenfalls in Nachtblau (überschreibt das fill-Attribut im SVG) */
  body.ft-nachtmodus .ft-kante path { fill: #0d1826; }
 
  /* Wolken: nachts nur noch als zarte Schleier vor den Sternen */
  body.ft-nachtmodus .ft-wolke { background: rgba(255, 255, 255, 0.09); filter: blur(2px); }
 
  /* Sternenhimmel: ein 2px-Punkt, per box-shadow zu ~26 Sternen vervielfacht.
     x-Positionen in vw, damit sich die Sterne über jede Bildschirmbreite verteilen. */
  body.ft-nachtmodus .ft-himmel::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 2px; height: 2px;
    border-radius: 50%;
    background: transparent;
    box-shadow:
      3vw   28px 0 0 rgba(255,255,255,0.9),   8vw   64px 0 0 rgba(255,255,255,0.5),
      12vw  22px 0 0 rgba(255,255,255,0.75),  16vw  88px 0 1px rgba(255,255,255,0.85),
      21vw  46px 0 0 rgba(255,255,255,0.55),  26vw 110px 0 0 rgba(255,255,255,0.65),
      30vw  18px 0 0 rgba(255,255,255,0.8),   34vw  72px 0 0 rgba(255,255,255,0.45),
      39vw  36px 0 1px rgba(255,255,255,0.9), 44vw  95px 0 0 rgba(255,255,255,0.55),
      48vw  25px 0 0 rgba(255,255,255,0.7),   53vw  60px 0 0 rgba(255,255,255,0.5),
      57vw 105px 0 0 rgba(255,255,255,0.6),   61vw  33px 0 1px rgba(255,255,255,0.85),
      66vw  80px 0 0 rgba(255,255,255,0.5),   70vw  20px 0 0 rgba(255,255,255,0.75),
      74vw  55px 0 0 rgba(255,255,255,0.6),   78vw 115px 0 0 rgba(255,255,255,0.45),
      82vw  40px 0 1px rgba(255,255,255,0.9), 86vw  70px 0 0 rgba(255,255,255,0.55),
      90vw  26px 0 0 rgba(255,255,255,0.7),   94vw  92px 0 0 rgba(255,255,255,0.5),
      97vw  48px 0 0 rgba(255,255,255,0.8),   50vw 130px 0 0 rgba(255,255,255,0.4),
      18vw 135px 0 0 rgba(255,255,255,0.4),   85vw 140px 0 0 rgba(255,255,255,0.4);
    animation: ft-funkeln 3.4s ease-in-out infinite alternate;
    pointer-events: none;
  }
  @keyframes ft-funkeln {
    from { opacity: 0.55; }
    to   { opacity: 1; }
  }
 
  /* Warmer Feuerschein hinter dem Inhalt, pulsiert sacht */
  body.ft-nachtmodus .ft-himmel::before {
    content: '';
    position: absolute;
    left: 50%; bottom: -140px;
    width: 640px; height: 420px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center,
      rgba(242, 160, 61, 0.20) 0%,
      rgba(242, 160, 61, 0.08) 42%,
      transparent 70%);
    animation: ft-schein 4.5s ease-in-out infinite alternate;
    pointer-events: none;
  }
  @keyframes ft-schein {
    from { opacity: 0.75; transform: translateX(-50%) scale(1); }
    to   { opacity: 1;    transform: translateX(-50%) scale(1.07); }
  }
 
  /* Feuer wirkt nachts kräftiger */
  body.ft-nachtmodus .ft-feuerplatz svg { filter: drop-shadow(0 0 14px rgba(242, 160, 61, 0.45)); }
 
  @media (prefers-reduced-motion: reduce) {
    body.ft-nachtmodus .ft-himmel::after,
    body.ft-nachtmodus .ft-himmel::before { animation: none !important; }
  }