/* Gemeinsamer Footer (src/footer/site-footer.mjs). Nur dieser Block; keine anderen Selektoren der Seite. Monochrom: Schwarz,
   Weiß und Weiß-Abstufungen, keine Farbtöne, keine Muster. Bewegung nur mit .sf--armed (Skript, ohne reduzierte Bewegung). */
.sf { --sf-fg: #fff; --sf-mut: rgb(255 255 255 / .68); --sf-faint: rgb(255 255 255 / .46); --sf-rule: rgb(255 255 255 / .16); --sf-e: cubic-bezier(.16, 1, .3, 1);
  position: relative; isolation: isolate; overflow: hidden; background: #000; color: var(--sf-fg);
  padding: 64px 0 calc(112px + env(safe-area-inset-bottom, 0px));
  font-family: "Sora", "Helvetica Neue", Arial, sans-serif; font-weight: 450; font-size: 16px; line-height: 1.5; letter-spacing: .03em; font-synthesis: none; }
.sf__in { width: calc(100% - 2 * clamp(16px, 5.2vw, 24px)); max-width: 472px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); }
.sf a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.sf p, .sf ol { margin: 0; padding: 0; }
.sf ol { list-style: none; }
.sf__k { display: block; color: var(--sf-faint); font-size: 12px; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; }
.sf__arrow { flex: none; width: 10px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1; overflow: visible; transition: transform .26s var(--sf-e); }
.sf__arrow--up { width: 6px; height: 10px; }

/* Kontakt: der Satz der Homepage, groß */
.sf__talk { display: grid; gap: 6px; padding-bottom: 22px; border-bottom: 1px solid var(--sf-rule); }
.sf__talk-t { font-size: clamp(40px, 12.6vw, 56px); line-height: 1.04; letter-spacing: -.03em; font-weight: 450; }
.sf__talk-m { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--sf-mut); font-size: 14px; letter-spacing: .02em; }

/* Bereiche als nummerierte Zeilen */
.sf__areas { margin-top: 26px; }
.sf__areas ol { margin-top: 8px; border-top: 1px solid var(--sf-rule); }
.sf__areas a { display: grid; grid-template-columns: 34px 1fr 12px; align-items: center; gap: 10px; min-height: 52px; border-bottom: 1px solid var(--sf-rule); }
.sf__i { color: var(--sf-faint); font-size: 12px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.sf__n { font-family: "Broche", "Sora", sans-serif; font-size: 14px; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase; }

/* Login und nach oben */
.sf__acts { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-top: 24px; }
.sf__login { display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 48px; padding: 0 18px; border: 1px solid var(--sf-fg); font-family: "Broche", "Sora", sans-serif; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.sf__top { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--sf-mut); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }

.sf__lead { margin-top: 36px !important; max-width: 34ch; color: var(--sf-mut); font-size: 15px; line-height: 1.55; text-wrap: pretty; }

/* Original-Wortmarke: Zeichen und zwei Zeilen, jede Zeile steigt aus ihrer Maske */
.sf__mark { display: block; margin-top: 34px; padding: 6px 0 4px; }
.sf__glyph { display: block; width: 40px; height: auto; margin-bottom: 14px; }
/* Seitenverhältnis der Zeilen fest, Breite immer die Spalte (kein Raster: sonst bläht die Bildbreite die Spur auf) */
.sf__word { display: block; width: 100%; }
.sf__wl { display: flow-root; width: 100%; min-height: 0; overflow: clip; } /* min-height 0: sonst wächst die Seitenverhältnis-Box auf die Bildhöhe */
.sf__wl + .sf__wl { margin-top: 6px; }
.sf__wl-i { display: block; }
.sf__wl img { display: block; width: 100%; max-width: none; height: auto; }
.sf__wl--1 { aspect-ratio: 423.21 / 49.08; }
.sf__wl--2 { aspect-ratio: 423.21 / 48.24; }
.sf__wl--2 img { margin-top: -12.397%; }

.sf__base { display: grid; gap: 2px; margin-top: 30px; padding-top: 12px; border-top: 1px solid var(--sf-rule); color: var(--sf-mut); font-size: 12px; letter-spacing: .04em; }
.sf__base > p { padding: 6px 0; }
.sf__base nav { display: flex; flex-wrap: wrap; column-gap: 22px; }
.sf__base nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sf-fg); text-transform: uppercase; }
.sf__lang { color: var(--sf-faint); }
.sf__note { margin-top: 8px !important; max-width: 44ch; color: var(--sf-faint); font-size: 12px; line-height: 1.55; }

.sf a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (hover: hover) {
  .sf__areas a:hover .sf__arrow, .sf__login:hover .sf__arrow, .sf__talk:hover .sf__arrow { transform: translateX(4px); }
  .sf__top:hover, .sf__talk:hover .sf__talk-m { color: var(--sf-fg); }
}

/* Enthüllung beim Erreichen: Zeilen steigen gestaffelt, Haarlinien ziehen sich auf, die Wortmarke steigt aus der Maske */
.sf--armed [data-sf-rv] { transition: opacity .8s var(--sf-e) calc(var(--i, 0) * 90ms), transform 1s var(--sf-e) calc(var(--i, 0) * 90ms); }
.sf--armed:not(.is-in) [data-sf-rv] { opacity: 0; transform: translate3d(0, 22px, 0); }
.sf--armed .sf__areas li { transition: opacity .7s var(--sf-e) calc(.15s + var(--j, 0) * 60ms), transform .9s var(--sf-e) calc(.15s + var(--j, 0) * 60ms); }
.sf--armed:not(.is-in) .sf__areas li { opacity: 0; transform: translate3d(0, 14px, 0); }
.sf--armed .sf__wl-i { transition: transform 1.15s var(--sf-e) calc(var(--l, 0) * 140ms); }
.sf--armed:not(.is-mark) .sf__wl-i { transform: translate3d(0, 104%, 0); }
.sf--armed .sf__glyph { transition: opacity .9s var(--sf-e), transform 1.1s var(--sf-e); }
.sf--armed:not(.is-mark) .sf__glyph { opacity: 0; transform: translate3d(0, 10px, 0); }
.sf__wl--2 { --l: 1; }
@media (prefers-reduced-motion: reduce) { .sf--armed * { transition: none !important; } }