/* vonk.dj – Link-Seite, TAKTWERK (F:\OneDrive\__DJ\vonk.dj-Konzept\CLAUDE-DESIGN-SYSTEM.md) */
@font-face { font-family: "Anton"; src: url("fonts/anton-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Barlow SC"; src: url("fonts/barlow-semi-condensed-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow SC"; src: url("fonts/barlow-semi-condensed-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --midnight: #101827;
  --tiefe: #0a101b;
  --weiss: #edf2f7;
  --cyan: #40d9e8;
  --stahl: #68768a;
  --linie: #1f2a3c;
  --hook: Impact, "Anton", "Arial Narrow", sans-serif;
  --text: Bahnschrift, "Barlow SC", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--midnight); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--midnight);
  color: var(--weiss);
  font: 400 17px/1.5 var(--text);
  -webkit-font-smoothing: antialiased;
}
main { max-width: 560px; margin: 0 auto; padding: 48px 16px 32px; }
a { color: var(--weiss); }
a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* Kopf */
.kopf { text-align: center; }
.profil { width: 160px; height: 160px; border-radius: 50%; display: block; margin: 0 auto 20px; }
.wortmarke { font: 700 44px/1 var(--text); letter-spacing: -0.01em; margin: 0; }
.wortmarke span { color: var(--cyan); }
.genre { margin: 10px 0 0; color: var(--stahl); font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; }
.intro { margin: 16px 0 0; }

/* Links */
.links { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 12px; }
.links a {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border: 2px solid var(--linie); border-radius: 12px;
  background: var(--tiefe); text-decoration: none;
  font: 400 24px/1 var(--hook); letter-spacing: 0.02em; text-transform: uppercase;
  transition: border-color .15s, transform .15s;
}
.links a:hover { border-color: var(--cyan); transform: translateY(-1px); }
.links small { font: 400 15px/1 var(--text); color: var(--stahl); text-transform: none; letter-spacing: 0; }
.links .name { flex: 1; }
.links .icon { flex: none; }
.links .session a { border-color: var(--cyan); padding: 12px 16px 12px 12px; }
.links .session .name small { display: block; margin-top: 8px; color: var(--weiss); line-height: 1.3; }
.links .artwork { flex: none; border-radius: 8px; }

/* Über mich */
.ueber { margin-top: 48px; }
.ueber h2 { font: 400 32px/1 var(--hook); text-transform: uppercase; margin: 0 0 12px; }
.ueber p { margin: 0 0 12px; color: #c9d2dd; }

/* Fuß und Textseiten */
footer { max-width: 560px; margin: 0 auto; padding: 24px 16px 40px; text-align: center; color: var(--stahl); font-size: 14px; }
footer a { color: var(--stahl); margin: 0 8px; }
.textseite h1 { font: 400 40px/1.05 var(--hook); text-transform: uppercase; margin: 0 0 24px; }
.textseite h2 { font: 700 19px/1.3 var(--text); margin: 28px 0 6px; }
.textseite p, .textseite li { color: #c9d2dd; }
.zurueck { display: inline-block; margin-bottom: 28px; color: var(--stahl); text-decoration: none; }
.zurueck:hover { color: var(--cyan); }

@media (prefers-reduced-motion: reduce) { .links a { transition: none; } .links a:hover { transform: none; } }