* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Colors */
  --color-electric-lime: #B6FF2E;
  --color-near-black-slate: #23262F;
  --color-pure-white: #FFFFFF;
  --color-cool-steel-mist: #9A9DA6;
  --color-pale-fog: #E4E4E7;
  --color-fallback-slate: #2E323C;
  --color-print-ink: #000000;
  --color-print-secondary: #333333;

  /* Typography */
  --font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-size-headline: 24px;
  --font-size-eyebrow: 18px;
  --font-size-body: 14px;
  --font-size-label: 12px;
  --line-height-tight: 1.4;
  --line-height-relaxed: 1.6;

  /* Spacing (4-unit scale) */
  --spacing-tight: 4px;
  --spacing-sm: 8px;
  --spacing-icon-gap: 12px;
  --spacing-md: 16px;
  --spacing-loose: 20px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 40px;
  --spacing-3xl: 48px;

  /* Shape */
  --radius-card: 16px;
  --radius-full: 50%;

  /* Component sizes */
  --size-badge: 40px;
  --size-avatar: 96px;
  --size-card: 320px;
  --width-reading-column: 640px;

  /* Motion */
  --duration-hover: 0.15s;
}

/* Minimum Tap Target Rule: shared by every stand-alone text link
   (email link, legal footer links, legal-page back link) — see DESIGN.md */
.tap-target {
  padding: var(--spacing-tight);
  line-height: var(--line-height-tight);
}

/* Home page card layout (index.html) */
.main-page {
  background: var(--color-near-black-slate);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-system);
  padding: max(var(--spacing-lg), env(safe-area-inset-top)) max(var(--spacing-lg), env(safe-area-inset-right)) max(var(--spacing-lg), env(safe-area-inset-bottom)) max(var(--spacing-lg), env(safe-area-inset-left));
}
.main-page .wrapper { display: flex; flex-direction: column; align-items: center; }
.main-page .card { background: var(--color-near-black-slate); border: 2px solid var(--color-electric-lime); border-radius: var(--radius-card); padding: var(--spacing-2xl) var(--spacing-xl); width: var(--size-card); max-width: 100%; text-align: center; }
.main-page .avatar { width: var(--size-avatar); height: var(--size-avatar); border-radius: var(--radius-full); border: 2px solid var(--color-electric-lime); margin: 0 auto var(--spacing-loose); overflow: hidden; background: var(--color-fallback-slate); }
.main-page .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; color: var(--color-pure-white); font-size: var(--font-size-label); text-align: center; }
.main-page .name { color: var(--color-pure-white); font-size: var(--font-size-headline); font-weight: 700; margin: 0 0 var(--spacing-tight); }
.main-page .title { color: var(--color-cool-steel-mist); font-size: var(--font-size-body); margin-bottom: var(--spacing-lg); }
.main-page .links { display: flex; justify-content: center; align-items: center; gap: var(--spacing-icon-gap); }
.main-page .links a { width: var(--size-badge); height: var(--size-badge); border-radius: var(--radius-full); background: var(--color-electric-lime); color: var(--color-near-black-slate); display: flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 700; transition: opacity var(--duration-hover) ease; }
.main-page .links a:hover { opacity: 0.85; }
.main-page .links a:focus-visible { outline: 2px solid var(--color-pure-white); outline-offset: 2px; }
.main-page .badge-linkedin { font-size: var(--font-size-body); }
.main-page .badge-xing { font-size: var(--font-size-body); letter-spacing: -0.02em; }
.main-page .email-text { margin-top: var(--spacing-md); }
.main-page .email-text a { color: var(--color-cool-steel-mist); font-size: var(--font-size-body); text-decoration: none; display: inline-flex; align-items: center; gap: var(--spacing-tight); }
.main-page .email-text svg { flex-shrink: 0; }
.main-page .email-text a:hover,
.main-page .email-text a:focus-visible { color: var(--color-electric-lime); }
.main-page .legal { margin-top: var(--spacing-loose); text-align: center; }
.main-page .legal a { color: var(--color-cool-steel-mist); font-size: var(--font-size-label); text-decoration: none; display: inline-block; margin: 0 var(--spacing-tight); }
.main-page .legal a:hover,
.main-page .legal a:focus-visible { color: var(--color-electric-lime); }
@media print {
  .main-page { background: var(--color-pure-white); }
  .main-page .card { background: var(--color-pure-white); border-color: var(--color-print-ink); }
  .main-page .avatar { border-color: var(--color-print-ink); background: var(--color-print-secondary); }
  .main-page .avatar img { color: var(--color-pure-white); }
  .main-page .name { color: var(--color-print-ink); }
  .main-page .title { color: var(--color-print-secondary); }
  .main-page .links a { background: var(--color-pure-white); border: 1px solid var(--color-print-ink); color: var(--color-print-ink); }
  .main-page .email-text a, .main-page .legal a { color: var(--color-print-ink); }
}

/* Legal page layout (impressum.html, datenschutz.html) */
.legal-page {
  background: var(--color-near-black-slate);
  color: var(--color-pale-fog);
  font-family: var(--font-family-system);
  line-height: var(--line-height-relaxed);
  padding: max(var(--spacing-3xl), env(safe-area-inset-top)) max(var(--spacing-loose), env(safe-area-inset-right)) max(var(--spacing-3xl), env(safe-area-inset-bottom)) max(var(--spacing-loose), env(safe-area-inset-left));
}
.legal-page main { max-width: var(--width-reading-column); margin: 0 auto; }
.legal-page h1 { color: var(--color-pure-white); font-size: var(--font-size-headline); margin-bottom: var(--spacing-lg); }
.legal-page h2 { color: var(--color-electric-lime); font-size: var(--font-size-eyebrow); margin: var(--spacing-xl) 0 var(--spacing-sm); scroll-margin-top: var(--spacing-lg); }
.legal-page p { color: var(--color-cool-steel-mist); font-size: var(--font-size-body); margin-bottom: var(--spacing-sm); }
.legal-page ul { margin: 0 0 var(--spacing-sm); padding-left: var(--spacing-lg); }
.legal-page li { color: var(--color-cool-steel-mist); font-size: var(--font-size-body); margin-bottom: var(--spacing-tight); }
.legal-page li:last-child { margin-bottom: 0; }
.legal-page a { color: var(--color-electric-lime); text-decoration: none; }
.legal-page a:focus-visible { outline: 2px solid var(--color-pure-white); outline-offset: 2px; }
.legal-page .back { display: inline-block; margin-bottom: var(--spacing-xl); font-size: var(--font-size-body); color: var(--color-electric-lime); text-decoration: none; }
@media print {
  .legal-page { background: var(--color-pure-white); color: var(--color-print-ink); }
  .legal-page h1 { color: var(--color-print-ink); }
  .legal-page h2 { color: var(--color-print-ink); }
  .legal-page p, .legal-page li { color: var(--color-print-ink); }
  .legal-page a, .legal-page .back { color: var(--color-print-ink); }
}