/* belschak.dev v4 — Sektion 08: Kontakt / Footer · Welle 2.5 Port
   Quelle des Ziel-Looks: claude-design-run/bundle-2026-07-14 (id="s08").
   deep-Streifen oben, dann Ink-Plate mit Wasserzeichen "08", magnetischem
   Mail-Link (Coral-Sweep) und Mono-Statuszeile mit echter Lisboa-Uhr.
   Cover-Reveal: .ft klebt sticky UNTER der Seite (media-guarded), die
   Vor-Sektion hebt ab. Integrations-Pflichten siehe Kommentar in section.html.
   Initial-States für Entrances setzt NUR section.js. */

.ft {
  position: relative;
  padding-top: clamp(70px, 10vh, 140px);
  background: var(--paper-deep); /* deep-Streifen über der Ink-Plate (Anschluss an Sektion 07) */
}

/* Cover-Reveal: Footer liegt sticky unter der Seite. NUR im Motion-Pfad
   (section.js setzt .ft--reveal und hält den Footer bis zur Reveal-Zone auf
   autoAlpha 0): 04/05 sind konstruktionsbedingt transparent (body trägt die
   Akt-Farbe), ein immer sichtbarer sticky Footer schiene dort durch
   (QA-Fund Welle 3). Default = normaler Flow, sicher für no-JS und reduced.
   Guard: nur wenn der Viewport hoch genug ist, dass die Plate ganz hineinpasst
   (sonst wäre der obere Plate-Teil nie erreichbar). Im Preview-Harness wirkungslos
   (Containing Block = main endet mit dem Footer). */
@media (min-height: 560px) {
  .ft--reveal {
    position: sticky;
    bottom: 0;
    z-index: 0;
  }
}

/* ---------- Ink-Plate ---------- */
.ft-plate {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  /* --px kommt aus shared/tokens.css (Welle 2.5, Owner C); Fallback = Bundle-Wert */
  padding: clamp(100px, 14vh, 190px) var(--px, clamp(20px, 6vw, 110px)) clamp(26px, 4vh, 44px);
}

/* Wasserzeichen "08" (dekorativ, 5% Opazität) */
.ft-wm {
  position: absolute;
  right: -4vw;
  top: -6vw;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(180px, 26vw, 400px);
  line-height: 1;
  color: var(--paper);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
}

.ft-kicker {
  position: relative;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400; /* als <h2> ausgezeichnet: Browser-Bold neutralisieren */
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(246, 240, 228, 0.75); /* 9.46:1 auf ink */
}

.ft-kdot {
  display: inline-block;
  width: 9px;
  height: 9px;
  background: var(--coral);
  margin-right: 12px;
}

/* ---------- Mail-Link: der eine große Moment ---------- */
.ft-mail {
  position: relative;
  display: block;
  text-decoration: none; /* Komponenten-Link: base.css unterstreicht a global (Welle 2.5) */
  margin-top: clamp(26px, 4vh, 52px);
  font-family: var(--font-display);
  font-weight: 460;
  font-variation-settings: 'opsz' 144;
  font-size: clamp(27px, 6.8vw, 124px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--paper); /* 16:1 auf ink; Fallback ohne background-clip */
  overflow-wrap: anywhere;
}

.ft-mail:hover,
.ft-mail:focus-visible {
  color: var(--coral); /* 5.1:1 auf ink, Large Text; Fallback-Hover + reduced-Endzustand */
}

/* Coral-Sweep über die Buchstaben (links -> rechts). Harte 50%-Kante wandert
   per background-position durch den Text. reduced-motion: base.css setzt die
   transition-duration auf 0.01ms -> harter Farbwechsel. Touch: kein Hover,
   Farbe bleibt paper, :focus-visible sweept. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ft-mail {
    background-image: linear-gradient(90deg, var(--coral) 0 50%, var(--paper) 50% 100%);
    background-size: 205% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: background-position 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .ft-mail:hover,
  .ft-mail:focus-visible {
    color: transparent;
    background-position: 0% 0;
  }
}

/* ---------- GitHub-Link ---------- */
.ft-ghrow {
  position: relative;
  margin-top: clamp(28px, 4vh, 52px);
}

.ft-gh {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}

.ft-gh:hover {
  color: var(--coral); /* 5.1:1 auf ink */
}

/* Zweiter Social-Link (LinkedIn) sitzt in derselben Reihe wie GitHub */
.ft-gh + .ft-gh {
  margin-left: clamp(20px, 3vw, 40px);
}

/* ---------- Statuszeile: Uhr, Beat, Kolophon, Copyright ---------- */
.ft-bar {
  position: relative;
  margin-top: clamp(70px, 11vh, 140px);
  border-top: 1px solid rgba(246, 240, 228, 0.28);
  padding-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: rgba(246, 240, 228, 0.75); /* 9.46:1 auf ink */
}

.ft-bar p {
  margin: 0;
}

.ft-clock {
  color: var(--coral); /* 5.1:1 auf ink */
  font-variant-numeric: tabular-nums;
}

.ft-legal a {
  color: rgba(246, 240, 228, 0.75); /* 9.46:1 auf ink */
  text-decoration: underline;
  text-decoration-color: rgba(246, 240, 228, 0.32);
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.ft-legal a:hover,
.ft-legal a:focus-visible {
  color: var(--coral); /* 5.1:1 auf ink */
  text-decoration-color: var(--coral);
}

.ft-copy {
  margin-left: auto;
}

@media (max-width: 719px) {
  .ft-copy {
    margin-left: 0;
    flex-basis: 100%;
  }
}