/* ============================================================
   Digitale Visitenkarte — Lennart Bestehorn
   Dark, premium, reduced. Mobile-first.
   ============================================================ */

/* ---- Fonts (self-hosted, no external requests) ---- */
@font-face {
  font-family: "Castoro Titling";
  src: url("/fonts/CastoroTitling-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens ---- */
/* Farbwelt aus dem Logo: Grau #4E4E4E, Schrift weiß, Akzente #B0ADA6 (fix) */
:root {
  --page-bg: #4E4E4E;
  --card-top: #565654;
  --card-mid: #4E4E4E;
  --card-bot: #454443;

  --name: #ffffff;
  --triad: #b0ada6;
  --email: #d2d0cb;
  --email-hover: #ffffff;
  --linkedin: #b0ada6;
  --linkedin-hover: #ffffff;
  --footer: #97948d;
  --footer-hover: #d2d0cb;

  --focus: rgba(255, 255, 255, 0.6);

  --font-serif: "Castoro Titling", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---- Reset ---- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

html { height: 100%; overscroll-behavior: none; }

/* Startseite (Einzelbildschirm) hart gegen Scrollen/Pull-to-Refresh sperren.
   Rechtsseiten haben kein .home und bleiben scrollbar. */
body.home {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
}

body {
  min-height: 100%;
  background: var(--page-bg);
  color: var(--name);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* kein Pull-to-Refresh / Überscrollen beim Touch-Effekt */
  overscroll-behavior: none;
}

/* ============================================================
   Stage + Card
   ============================================================ */
.stage {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  position: relative;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  background: linear-gradient(180deg, var(--card-top) 0%, var(--card-mid) 50%, var(--card-bot) 100%);
  isolation: isolate;
  /* size the centre text relative to the card, not the viewport */
  container-type: inline-size;
  /* kein Markieren/Callout beim Gedrückthalten (Logo/Name) */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Background canvas — masked so the pattern fades behind the centred text. */
.card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  /* Touch löst den Effekt aus, statt zu scrollen/neu zu laden */
  touch-action: none;
  -webkit-mask-image: radial-gradient(64% 27% at 50% 54%, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.48) 38%, rgba(0,0,0,1) 72%);
          mask-image: radial-gradient(64% 27% at 50% 54%, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.48) 38%, rgba(0,0,0,1) 72%);
}

/* ---- Centre content: name + triad ---- */
.card__center {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 26px;
  text-align: center;
  pointer-events: none;
}

/* LB-Monogramm über dem Namen (volles Logo-Lockup) */
.logo-mono {
  display: block;
  width: min(16cqw, 84px);
  height: auto;
  margin: 0 0 clamp(18px, 3.2cqw, 30px);
}

.name {
  margin: 0;
  line-height: 0;
  color: var(--name);
}

/* Hero = Logo-Wortmarke als Vektor; skaliert mit der Kartenbreite */
.name-mark {
  display: block;
  width: min(78cqw, 720px);
  height: auto;
}

/* echter Name bleibt als unsichtbarer Text im DOM (SEO/Screenreader) */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.triad {
  margin: 26px 0 0;
  font-family: var(--font-sans);
  font-weight: 500;
  /* vw fallback, then card-relative sizing so it never wraps */
  font-size: clamp(9px, 2.7vw, 11px);
  font-size: clamp(8.5px, 2.82cqw, 11px);
  letter-spacing: 0.36em;
  word-spacing: 0.4em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--triad);
  max-width: 100%;
}

/* ---- Contact links ---- */
.card__contact {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}

.contact {
  font-family: var(--font-sans);
  text-decoration: none;
  transition: color 0.25s ease;
  /* Kontakt bleibt markier-/antippbar */
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

.contact--email {
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--email);
}
.contact--email:hover,
.contact--email:focus-visible { color: var(--email-hover); }

.contact--linkedin {
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--linkedin);
}
.contact--linkedin:hover,
.contact--linkedin:focus-visible { color: var(--linkedin-hover); }

/* ============================================================
   Footer (dezente Rechtslinks)
   ============================================================ */
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}

.footer__nav {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}

.footer__link {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--footer);
  text-decoration: none;
  transition: color 0.25s ease;
}
.footer__link:hover,
.footer__link:focus-visible { color: var(--footer-hover); }

.footer__sep {
  color: var(--footer);
  font-size: 10.5px;
  opacity: 0.7;
}

/* ============================================================
   Desktop: full-bleed — the card fills the entire viewport
   (no centred phone-mockup frame). Deep-dark throughout.
   The centre text is capped via the clamp() max values, so it
   stays at its design size on large screens while the canvas
   grid/network spreads across the full screen.
   ============================================================ */
@media (min-width: 720px) {
  .footer { padding-bottom: 22px; }
}

/* ============================================================
   Accessibility
   ============================================================ */
:focus-visible {
  outline: 1px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .contact,
  .footer__link { transition: none; }
}

/* ============================================================
   Rechtliche Unterseiten (Impressum / Datenschutz)
   Gleiche dunkle Anmutung, nur Text.
   ============================================================ */
.legal {
  min-height: 100svh;
  display: flex;
  justify-content: center;
  background: linear-gradient(180deg, var(--card-top) 0%, var(--card-mid) 45%, var(--card-bot) 100%);
}

.legal__inner {
  width: 100%;
  max-width: 680px;
  padding: clamp(56px, 12vh, 120px) 24px 96px;
}

.legal__back {
  display: inline-block;
  margin-bottom: 40px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--linkedin);
  text-decoration: none;
  transition: color 0.25s ease;
}
.legal__back:hover,
.legal__back:focus-visible { color: var(--linkedin-hover); }

.legal h1 {
  margin: 0 0 32px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(26px, 6vw, 34px);
  letter-spacing: -0.01em;
  color: var(--name);
}

.legal h2 {
  margin: 36px 0 12px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: #cfc8bd;
}

.legal p,
.legal li {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
  color: #a39c91;
}

.legal a { color: var(--email); }
.legal a:hover,
.legal a:focus-visible { color: var(--email-hover); }

.legal .placeholder {
  display: block;
  margin: 8px 0;
  padding: 14px 16px;
  border: 1px dashed rgba(180, 174, 160, 0.28);
  border-radius: 8px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: #8d867b;
  background: rgba(255, 255, 255, 0.012);
}

/* Inline-Markierung für noch einzutragende Daten (nur Entwurf) */
.legal .ph {
  color: #e7c9a3;
  background: rgba(231, 201, 163, 0.10);
  border-bottom: 1px dashed rgba(231, 201, 163, 0.5);
  padding: 0 2px;
}

.legal .note {
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid rgba(180, 174, 160, 0.15);
  font-size: 12px;
  color: #837c72;
}