/* Cantact – Business Consulting
   Minimal digital business card. System font (Arial), no external fonts,
   no trackers. Two colours only: black and a deep blue.

   Type scale — exactly three sizes:
     --s1  largest   (Cantact / Business Consulting)
     --s2  medium    (Erik Marzen · sectors · tagline · services)
     --s3  smaller   (location · email · Impressum · LinkedIn) */

:root {
  --bg:    #ffffff;
  --ink:   #111111;   /* black */
  --blue:  #14406b;   /* deep blue accent */

  --s1: 1.625rem;     /* ~26px */
  --s2: 1.25rem;      /* ~20px */
  --s3: 1rem;         /* ~16px */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Arial, "Helvetica Neue", Helvetica, "Segoe UI", system-ui, sans-serif;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.card {
  /* Fill the viewport and centre the content so the whole card is visible
     without scrolling. min-height (not height) means that on an unusually
     short screen the page still grows and scrolls as a safe fallback
     rather than clipping content. Uses vh (not svh) — vh is supported
     everywhere; some browsers miscompute svh to ~0 inside clamp(), which
     collapsed the spacing. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(14px, 4vh, 28px) 24px;
  text-align: center;
}

/* Every block below sets its own full margin (top gap, zero bottom) so we
   never depend on a separate reset rule — that avoids the specificity trap
   where a `.card > p` reset would out-rank a per-element `.name` and wipe
   the spacing. Vertical gaps scale with viewport height via clamp() so the
   card stays on one screen without scrolling. */

/* --- Head: Cantact / Business Consulting (size 1, black) --- */
.brand {
  font-size: var(--s1);
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0;
}
.subtitle {
  font-size: var(--s1);
  font-weight: 400;
  margin: 0.15rem 0 0;
}

/* --- Erik Marzen (size 2, black) --- */
.name {
  font-size: var(--s2);
  font-weight: 700;
  margin: clamp(0.6rem, 3vh, 1.6rem) 0 0;
}

/* --- Sectors (size 2, blue) --- */
.sectors {
  color: var(--blue);
  font-size: var(--s2);
  font-weight: 400;
  margin: clamp(0.7rem, 3.4vh, 2rem) 0 0;
}

/* --- Location (size 3, black, clearly visible) --- */
.location {
  font-size: var(--s3);
  font-weight: 400;
  margin: clamp(0.7rem, 3.4vh, 2rem) 0 0;
}

/* --- Tagline + services (size 2, blue) --- */
.tagline {
  color: var(--blue);
  font-size: var(--s2);
  font-weight: 600;
  margin: clamp(0.7rem, 3.4vh, 2rem) 0 0;
}
.services {
  color: var(--blue);
  font-size: var(--s2);
  font-weight: 400;
  margin: 0.35rem 0 0;
}

/* --- Email (size 3, black) --- */
.email {
  font-size: var(--s3);
  margin: clamp(0.7rem, 3.6vh, 2.2rem) 0 0;
}

/* --- Links: Impressum / Datenschutz + LinkedIn (size 3, blue) --- */
.legal {
  font-size: var(--s3);
  margin: clamp(0.6rem, 3vh, 1.8rem) 0 0;
}
.social {
  font-size: var(--s3);
  margin: clamp(0.5rem, 2.4vh, 1.4rem) 0 0;
}

/* --- Link styling --- */
a {
  color: var(--blue);
  text-decoration: none;
}

.email a { color: var(--ink); }
.email a:hover { text-decoration: underline; }

.legal a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.social a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--blue);
  font-weight: 400;
}
.social svg { display: block; }
.social a:hover { text-decoration: underline; }

/* Clear, always-visible focus outline for keyboard users */
a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Legal page (Impressum / Datenschutz) ---
   Long content: opt out of the card's full-height centring so it flows
   from the top and scrolls naturally. */
.legal-page {
  min-height: 0;
  display: block;
  max-width: 720px;
  padding: 6vh 24px 8vh;
  text-align: left;
  line-height: 1.6;
}
.legal-page h1 { font-size: var(--s1); font-weight: 700; margin: 0 0 1.25rem; }
.legal-page h2 { font-size: var(--s2); font-weight: 700; margin: 2rem 0 0.5rem; }
.legal-page p  { font-size: var(--s3); margin: 0.4rem 0; }
.legal-page a  { text-decoration: underline; text-underline-offset: 3px; }
.back {
  display: inline-block;
  margin-top: 2.5rem;
  font-size: var(--s3);
}

/* Mobile-only line break (e.g. before "Ecosystem Architecture").
   Inert on desktop, active on narrow screens. */
.brm { display: none; }

/* --- Small screens: nudge the largest size down a touch --- */
@media (max-width: 480px) {
  :root { --s1: 1.5rem; }   /* ~24px */
  .card { padding: 20px; }
  .legal-page { padding: 6vh 20px 8vh; }
  .brm { display: inline; }
}