/* Fuß von werefine.de: das Allgäu als Kupferstich in Ebenen (Alpen, Kempten mit Basilika, Fichten, Dachstuhl),
   Linien in Grün und Blau, Polarlicht dahinter, der Text steht im Bild. Gebaut wird das Markup von tools/site_nav.py
   (build_footer), die Startseite trägt dieselbe Ausgabe. Bewegung nur über transform und opacity, ohne die Klasse
   wf-bewegt (reduzierte Bewegung) steht alles still. Endlos-Animationen laufen nur, solange der Fuß im Bild ist. */
.wf{--bg:#080b0e;--text:#dde8f0;--muted:#90aec8;--green:#2dffa0;--purple:#a587ff;--blue:#4cc4ff;
  --mono:'Space Mono',monospace;--sans:'Space Grotesk',sans-serif;--serif-italic:'Instrument Serif',serif;
  --wf-kurve:cubic-bezier(.22,1,.36,1);--wf-schwell:cubic-bezier(.45,0,.55,1);--gutter:3rem}
/* Alte Fußregeln der Startseite und von site-base.css neutralisieren (Element plus Klasse schlägt das reine Element) */
footer.wf{display:block;margin:0;padding:0;border:0;max-width:none;width:auto;text-align:left;row-gap:normal;
  font-family:var(--sans);font-size:1rem;letter-spacing:normal;line-height:1.5;color:var(--text)}
.wf,.wf *,.wf *::before,.wf *::after{box-sizing:border-box}
.wf img{display:block;max-width:100%}
.wf :focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}
/* Fuß */
.wf{--szene-h:min(56.25vw,860px);position:relative;background:var(--bg);overflow:clip;isolation:isolate}
.wf-buehne{position:relative}

/* Himmel: Polarlicht und Sterne, ganz hinten */
.wf-himmel{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.wf-licht{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.wf-licht--gruen{width:60vw;height:26vw;left:-6vw;top:22%;background:radial-gradient(closest-side,rgba(45,255,160,.55),transparent)}
.wf-licht--lila{width:52vw;height:24vw;right:-8vw;top:30%;background:radial-gradient(closest-side,rgba(165,135,255,.5),transparent)}
.wf-licht--blau{width:40vw;height:18vw;left:34vw;top:44%;background:radial-gradient(closest-side,rgba(76,196,255,.38),transparent)}
.wf-sterne{position:absolute;inset:0 0 40% 0;opacity:.5;
  background-image:radial-gradient(1px 1px at 12% 18%,#fff 50%,transparent),radial-gradient(1px 1px at 27% 8%,#fff 50%,transparent),
  radial-gradient(1px 1px at 41% 26%,#cfe 50%,transparent),radial-gradient(1.2px 1.2px at 58% 12%,#fff 50%,transparent),
  radial-gradient(1px 1px at 73% 22%,#fff 50%,transparent),radial-gradient(1px 1px at 86% 9%,#dff 50%,transparent),
  radial-gradient(1px 1px at 93% 31%,#fff 50%,transparent),radial-gradient(1px 1px at 6% 36%,#fff 50%,transparent),
  radial-gradient(1px 1px at 35% 40%,#fff 50%,transparent),radial-gradient(1px 1px at 66% 38%,#fff 50%,transparent);
  -webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent)}
.wf-bewegt .wf-sichtbar .wf-licht--gruen{animation:wf-treiben 22s var(--wf-schwell) infinite alternate}
.wf-bewegt .wf-sichtbar .wf-licht--lila{animation:wf-treiben 28s var(--wf-schwell) -9s infinite alternate-reverse}
.wf-bewegt .wf-sichtbar .wf-licht--blau{animation:wf-treiben 18s var(--wf-schwell) -4s infinite alternate}
@keyframes wf-treiben{from{transform:translate3d(-4vw,0,0) scale(1)}to{transform:translate3d(5vw,-1.5vw,0) scale(1.12)}}

/* Szene unten bündig, Ebenen in der Tiefe gestaffelt */
.wf-szene{position:absolute;left:0;right:0;bottom:0;height:var(--szene-h);z-index:1;pointer-events:none}
.wf-ebene{position:absolute;inset:0;
  transform:translate3d(calc(var(--wf-mx,0) * var(--tiefe,0) * -18px),calc(var(--wf-rest,0) * var(--tiefe,0) * 1px + var(--wf-my,0) * var(--tiefe,0) * -10px),0)}
.wf-bewegt .wf-ebene{will-change:transform}
.wf-flaeche{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 100%)}
.wf-stueck{position:absolute;bottom:-1px;height:var(--h);width:auto;max-width:none}
.wf-baeume{left:var(--x,1%);transform-origin:50% 100%}
.wf-dach{right:var(--x,3%)}
.wf-bewegt .wf-sichtbar .wf-baeume{animation:wf-wiegen 9s var(--wf-schwell) infinite alternate}
@keyframes wf-wiegen{from{transform:rotate(-.7deg)}to{transform:rotate(.9deg)}}
/* Schleier: liegt zwischen Szene und Text und nimmt den Linien hinter der Schrift die Härte, ohne sichtbare Kante */
.wf-schleier{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 70% 62% at 42% 30%,rgba(8,11,14,.78) 0%,rgba(8,11,14,.5) 45%,transparent 75%)}
.wf-inhalt .wf-liste a,.wf-inhalt .wf-titel,.wf-inhalt .wf-ort,.wf-unten{text-shadow:0 0 14px var(--bg),0 0 4px var(--bg),0 0 2px var(--bg)}
/* Boden: dunkelt die Unterkante ab, damit nichts hart abbricht */
.wf-boden{position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(rgba(8,11,14,0),rgba(8,11,14,.82) 50%,rgba(8,11,14,.97))}

/* Inhalt: oben im Himmel, die Szene beginnt erst darunter */
.wf-inhalt{position:relative;z-index:2;max-width:1400px;margin:0 auto;padding:6rem var(--gutter) calc(var(--szene-h) * .32)}
.wf-raster{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:2.5rem 3rem;align-items:start}
.wf-marke{display:grid;gap:1.1rem;justify-items:start}
.wf-wort{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.wf .wf-wort .we,.wf .wf-wort .ref{background:none;padding:0;border:0;border-radius:0;box-shadow:none}
.wf .wf-wort .we{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:700;font-size:2.6rem;color:var(--green);letter-spacing:-.02em;line-height:1}
.wf .wf-wort .ref{font-family:'Syne',sans-serif;font-weight:700;font-size:1.5rem;color:var(--text);letter-spacing:.05em;text-transform:uppercase;margin-left:2px}
.wf-satz{font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.12;letter-spacing:-.015em;font-weight:700;margin:0;max-width:15ch}
.wf-satz em{font-family:var(--serif-italic);font-style:italic;font-weight:400;color:var(--green)}
.wf-ort{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--muted);margin:0}
.wf .footer-socials{display:flex;flex-wrap:wrap;gap:.7rem}
.wf .footer-socials a{-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--muted);text-decoration:none;
  background:linear-gradient(155deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.018) 50%,rgba(255,255,255,.05) 100%),rgba(13,18,25,.72);
  border:1px solid rgba(255,255,255,.12);
  transition:color .25s var(--wf-kurve),border-color .25s var(--wf-kurve),transform .25s var(--wf-kurve),box-shadow .25s var(--wf-kurve)}
.wf .footer-socials a svg{width:18px;height:18px;display:block}
.wf .footer-socials .s-whop-logo{width:20px;height:auto}
@media (hover:hover){.wf .footer-socials a:hover{color:#fff;transform:translateY(-2px);border-color:rgba(45,255,160,.6);box-shadow:0 0 0 3px rgba(45,255,160,.1),0 12px 26px -10px rgba(45,255,160,.45)}}
.wf .footer-socials a:active{transform:scale(.97)}

.wf .wf-titel{display:flex;align-items:center;min-height:44px;text-decoration:none;font-family:var(--mono);font-weight:700;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--green);margin:0 0 .1rem}
.wf-spalte:nth-child(3) .wf-titel{color:var(--blue)}
.wf-spalte:nth-child(4) .wf-titel{color:var(--purple)}
.wf-liste{list-style:none;margin:0;padding:0;display:grid}
footer.wf .wf-liste li{margin:0;padding:0}
footer.wf a.wf-titel,footer.wf .wf-unten a,footer.wf .footer-socials a,footer.wf a.wf-wort{padding:0;margin:0}
/* Umbrechende Links (Website erstellen lassen) bekommen denselben Luftraum wie einzeilige */
footer.wf .wf-liste a{padding:.6rem 0;margin:0;line-height:1.25}
.wf .wf-liste a{display:flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;
  font-size:.95rem;transition:color .25s var(--wf-kurve),text-decoration-color .25s var(--wf-kurve)}
@media (hover:hover){.wf-liste a:hover{color:var(--text);text-decoration-color:var(--green)}}
.wf-knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;margin-top:.9rem;padding:0 1.5rem;border-radius:99px;
  background:var(--green);color:#04120b;font-family:var(--mono);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  box-shadow:0 10px 30px -12px rgba(45,255,160,.6);transition:transform .25s var(--wf-kurve),box-shadow .25s var(--wf-kurve)}
@media (hover:hover){.wf-knopf:hover{transform:translateY(-2px);box-shadow:0 16px 36px -12px rgba(45,255,160,.75)}}
.wf-knopf:active{transform:scale(.97)}
.wf-knopf svg{width:14px;height:14px}

/* Seitenbezogene Zeile unter den Spalten (aus dem alten Fuß übernommen) */
.wf .footer-tag{margin-top:2rem;max-width:640px;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;line-height:1.7;color:var(--muted)}
@media (hover:hover){.wf a.wf-titel:hover{text-decoration:underline;text-underline-offset:4px}}
/* Recht und Copyright: unten im Bild, auf dem abgedunkelten Boden wie die Zeile unter einem Stich */
.wf-unten{position:absolute;z-index:3;left:0;right:0;bottom:0;max-width:1400px;margin:0 auto;padding:0 var(--gutter) 1.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:0 2rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:#c3d4e2}
.wf .wf-unten a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:inherit;text-decoration:none;transition:color .2s}
@media (hover:hover){.wf-unten a:hover{color:var(--text)}}
.wf-unten>span{margin-left:auto}

/* Tablet und Handy */
@media (max-width:1099px){
  .wf-raster{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wf-marke{grid-column:1/-1}
  .wf-inhalt{padding-bottom:calc(var(--szene-h) * .38)}
  .wf-knopf{padding:0 1.1rem;letter-spacing:.08em}
}
@media (max-width:699px){
  .wf{--szene-h:128vw;--gutter:1.5rem}
  footer.wf{padding:0}
  .wf-inhalt{padding-top:4.5rem;padding-bottom:calc(var(--szene-h) * .4 + 10.5rem)}
  .wf-boden{height:16%}
  .wf-unten{bottom:calc(var(--szene-h) * .4);padding-bottom:0}
  .wf-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.25rem}
  .wf-raster>.wf-kontakt{grid-column:1/-1}
  .wf-flaeche--alpen{object-position:38% 100%}
  .wf-flaeche--stadt{object-position:16% 100%}
  .wf-baeume{--h:46%;--x:-10%}
  .wf-dach{--h:40%;--x:-8%}
  .wf-unten{gap:0 1.25rem}
  .wf-unten>span{margin-left:0;flex-basis:100%;display:block;line-height:44px}
  .wf-licht{filter:blur(50px)}
  .wf-licht--gruen{width:120vw;height:60vw;top:30%}
  .wf-licht--lila{width:100vw;height:50vw;top:46%}
  .wf-licht--blau{display:none}
}

/* Einblenden: einmalig beim ersten Sichtkontakt */
.wf-bewegt [data-wf] .wf-rev{opacity:0;transform:translateY(28px);
  transition:opacity .7s var(--wf-kurve),transform .7s var(--wf-kurve);transition-delay:calc(min(var(--i,0) * 70ms,420ms))}
.wf-bewegt [data-wf].wf-an .wf-rev{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}}