/* Footer (aus Footer 2d „Der Brief“): Glastafel mit Wachssiegel, Unterschrift und Call.
   Alle Klassen mit wsf- Präfix, damit nichts mit den Seitenstilen kollidiert. */
.wsf-f {  --bg: #EFE9DE; --elev: #F7F3EC; --fg: #1A1714; --mute: #6B6255; --line: rgba(26,23,20,0.14); --gold: #BFAE86; --goldt: #665A38; --glass: rgba(255,255,255,0.46); --glassb: rgba(255,255,255,0.8);  font-family: var(--font-display, 'Libre Baskerville', Georgia, serif); }
html[data-theme='dark'] .wsf-f {  --bg: #14110D; --elev: #1C1812; --fg: #F3EEE4; --mute: rgba(243,238,228,0.62); --line: rgba(243,238,228,0.12); --gold: #BFAE86; --goldt: #BFAE86; --glass: rgba(52,44,34,0.42); --glassb: rgba(243,238,228,0.18);  }
.wsf-f a { color: inherit; text-decoration: none; }
  .wsf-f { position: relative; overflow: hidden; background: var(--bg); color: var(--fg); padding: clamp(56px,9vh,110px) clamp(24px,4vw,56px) clamp(24px,3vh,36px); }
  .wsf-wrap { max-width: 1400px; margin: 0 auto; position: relative; }
  .wsf-eye { display: inline-flex; align-items: center; gap: 12px; font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--goldt); }
  .wsf-eye::before { content: ""; width: 28px; height: 1px; background: var(--gold); }
  .wsf-h { margin: 0; font-weight: 400; letter-spacing: -0.015em; line-height: 1.02; text-wrap: balance; }
  .wsf-h em { font-style: italic; color: var(--goldt); }
  .wsf-mute { color: var(--mute); }
  .wsf-lbl { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); }
  .wsf-nav { display: flex; flex-wrap: wrap; gap: 6px 26px; font-size: 14px; }
  .wsf-nav a { position: relative; padding: 4px 0; transition: color 400ms cubic-bezier(.16,1,.3,1); }
  .wsf-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 600ms cubic-bezier(.16,1,.3,1); }
  .wsf-nav a:hover { color: var(--goldt); }
  .wsf-nav a:hover::after { transform: scaleX(1); }
  .wsf-legal { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--mute); padding-top: 20px; border-top: 1px solid var(--line); }
  .wsf-legal nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
  .wsf-legal a:hover { color: var(--goldt); }
  .wsf-logo { display: block; background: var(--goldt); -webkit-mask: url(../../assets/ws-logo-full.svg) no-repeat left center / contain; mask: url(../../assets/ws-logo-full.svg) no-repeat left center / contain; aspect-ratio: 2062.97 / 357.07; }
  .wsf-icon { display: block; background: var(--goldt); -webkit-mask: url(../../assets/ws-icon.png) no-repeat center / contain; mask: url(../../assets/ws-icon.png) no-repeat center / contain; aspect-ratio: 1 / 1; }
  .wsf-sig { display: block; -webkit-mask-position: left center; mask-position: left center; background: var(--goldt); -webkit-mask: url(../../assets/signature-theisebach.png) no-repeat left center / contain; mask: url(../../assets/signature-theisebach.png) no-repeat left center / contain; aspect-ratio: 3 / 1; }
  .wsf-li { width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); color: var(--fg); transition: border-color 400ms, color 400ms, transform 500ms cubic-bezier(.16,1,.3,1); }
  .wsf-li:hover { border-color: var(--gold); color: var(--goldt); transform: translateY(-2px); }
  .wsf-li svg { width: 15px; height: 15px; fill: currentColor; }
  /* Strategie-Call: Liquid Glass 08, identisch mit Hero und Menüpille der Landingpage */
  .wsf-cta { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 12px; border: 0; border-radius: 999px;
    padding: 10px 12px 10px 26px; font-size: 15px; text-decoration: none; color: var(--fg);
    background: rgba(255,255,255,0.10); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 0 0 1px rgba(191,174,134,0.35), inset 0 -1px 0 rgba(0,0,0,0.25), 0 18px 40px -22px rgba(0,0,0,0.9);
    transition: background .35s, box-shadow .55s, color .35s, transform .35s cubic-bezier(.2,.8,.2,1); }
  .wsf-cta:hover { background: rgba(191,174,134,0.16); color: var(--fg); transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 0 0 1px rgba(216,190,147,0.95), inset 0 -1px 0 rgba(0,0,0,0.2), 0 0 36px -6px rgba(191,174,134,0.5), 0 26px 60px -26px rgba(0,0,0,1); }
  .wsf-cta:active { transform: translateY(0) scale(.975); box-shadow: inset 0 0 0 1px rgba(191,174,134,0.7), inset 0 3px 10px rgba(0,0,0,0.45); }
  html[data-theme='dark'] .wsf-cta { color: #FAFAF7; }
  html[data-theme='dark'] .wsf-cta:hover { color: #F3E7CC; }
  .wsf-cta-arr { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(191,174,134,0.9); color: #1A1714; transition: transform .45s cubic-bezier(.2,.8,.2,1), background .3s, color .3s; }
  .wsf-cta:hover .wsf-cta-arr { background: rgba(216,190,147,0.95); color: #1A1714; animation: wsfArrowNudge 3.2s cubic-bezier(.37,0,.24,1) infinite; }
  @keyframes wsfArrowNudge { 0% { transform: translate(0,0); } 35% { transform: translate(2.5px,-2.5px); } 65% { transform: translate(2.5px,-2.5px); } 100% { transform: translate(0,0); } }
  @media (prefers-reduced-motion: reduce) { .wsf-cta { transition: none; } .wsf-cta:hover .wsf-cta-arr { animation: none; } }
  /* Reveals */
  .wsf-rv { opacity: 0; transform: translateY(24px); transition: opacity 1100ms cubic-bezier(.16,1,.3,1), transform 1100ms cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0ms); }
  .wsf-in .wsf-rv { opacity: 1; transform: none; }
  .wsf-wipe { clip-path: inset(0 100% 0 0); transition: clip-path 1800ms cubic-bezier(.76,0,.24,1); transition-delay: var(--d, 0ms); }
  .wsf-in .wsf-wipe { clip-path: inset(0 0 0 0); }
  .wsf-rule { height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 1600ms cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0ms); }
  .wsf-in .wsf-rule { transform: scaleX(1); }
        @media (max-width: 760px) { .wsf-hide-m { display: none !important; } .wsf-stack-m { grid-template-columns: minmax(0,1fr) !important; } }
  @media (prefers-reduced-motion: reduce) { .wsf-rv, .wsf-wipe, .wsf-rule { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; } }
  /* Wachssiegel (3a): gegossener Goldrand, eingeprägtes Icon, gibt beim Klick nach */
  .wsf-wax { position: relative; display: block; aspect-ratio: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; transform: rotate(12deg); }
  .wsf-wax-body { position: absolute; inset: 0; display: block; filter: drop-shadow(0 18px 24px rgba(0,0,0,0.45)); transition: transform 900ms cubic-bezier(.16,1,.3,1), filter 900ms; }
  .wsf-wax-body svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .wsf-wax-emb { position: absolute; inset: 27%; background: #6E5D38; filter: drop-shadow(0 1px 0 rgba(255,240,200,0.55)) drop-shadow(0 -1px 0 rgba(40,28,10,0.7)); }
  .wsf-wax-sheen { position: absolute; inset: 6%; border-radius: 50%; pointer-events: none; opacity: 0; mix-blend-mode: soft-light;
    background: radial-gradient(55% 55% at var(--mx,35%) var(--my,30%), rgba(255,246,222,0.95), rgba(255,246,222,0) 65%); transition: opacity 600ms; }
  .wsf-wax:hover .wsf-wax-body { transform: translateY(-4px) rotate(-3deg); filter: drop-shadow(0 26px 34px rgba(0,0,0,0.5)); }
  .wsf-wax:hover .wsf-wax-sheen { opacity: 1; }
  .wsf-wax:active .wsf-wax-body { transform: scale(0.94); transition-duration: 160ms; filter: drop-shadow(0 8px 12px rgba(0,0,0,0.45)); }
  .wsf-wax.wsf-rv { transform: rotate(12deg) translateY(24px); }
  .wsf-in .wsf-wax.wsf-rv { transform: rotate(12deg); }

/* Glastafel: weicher Spotlight und mitleuchtende Kante beim Hover */
.wsf-panel { isolation: isolate; transition: transform 1100ms cubic-bezier(.16,1,.3,1), box-shadow 1100ms cubic-bezier(.16,1,.3,1), opacity 1100ms cubic-bezier(.16,1,.3,1) !important; }
.wsf-panel::before, .wsf-panel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 900ms cubic-bezier(.16,1,.3,1); }
.wsf-panel::before { z-index: -1; background: radial-gradient(520px circle at var(--px, 50%) var(--py, 30%), rgba(222, 204, 160, 0.13), rgba(222, 204, 160, 0.05) 38%, transparent 68%); }
.wsf-panel::after { padding: 1px; background: radial-gradient(360px circle at var(--px, 50%) var(--py, 30%), rgba(232, 214, 170, 0.7), rgba(232, 214, 170, 0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.wsf-panel:hover::before, .wsf-panel:hover::after { opacity: 1; }
html:not([data-theme='dark']) .wsf-panel::before { background: radial-gradient(520px circle at var(--px, 50%) var(--py, 30%), rgba(191, 174, 134, 0.16), rgba(191, 174, 134, 0.05) 38%, transparent 68%); }
html:not([data-theme='dark']) .wsf-panel::after { background: radial-gradient(360px circle at var(--px, 50%) var(--py, 30%), rgba(160, 140, 96, 0.55), rgba(160, 140, 96, 0) 70%); }
.wsf-in .wsf-panel:hover { transform: translateY(-3px); box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.26), 0 50px 130px -50px rgba(0,0,0,0.7), 0 0 80px -40px rgba(191,174,134,0.35) !important; }
@media (hover: none), (prefers-reduced-motion: reduce) { .wsf-panel::before, .wsf-panel::after { display: none; } .wsf-in .wsf-panel:hover { transform: none; } }

/* Das Wachssiegel liegt immer über der leuchtenden Kante der Tafel */
.wsf-panel::after { z-index: 1; }
.wsf-panel .wsf-wax { z-index: 4; }

/* Tablet und Handy: Text startet unterhalb des Wachssiegels, Siegel etwas kleiner */
@media (max-width: 1100px) {
  .wsf-panel { padding-top: clamp(96px, 13vw, 124px) !important; }
  .wsf-panel .wsf-wax { width: clamp(104px, 13vw, 128px) !important; }
}
@media (max-width: 760px) {
  .wsf-panel { padding-top: 92px !important; }
  .wsf-panel .wsf-wax { width: 100px !important; }
}