/* patrick-geschke.de – Visitenkarte. Keine externen Ressourcen, Schriften selbst gehostet (SIL OFL 1.1). */
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-latin-wght.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-latin-wght.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
:root {
  --bg: #f4f2ee; --ink: #111318; --ink-2: #4a4f5a; --line: #d6d2ca; --accent: #2b50d6; --accent-ink: #fff; --net: 43, 80, 214;
  --sans: "Space Grotesk", "Helvetica Neue", "Segoe UI", system-ui, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --pad: clamp(20px, 6vw, 72px);
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0e1014; --ink: #eceae6; --ink-2: #9aa0ab; --line: #262a33; --accent: #7d97ff; --accent-ink: #0e1014; --net: 125, 151, 255; color-scheme: dark; }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }

.card { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; overflow: hidden; }
.net { position: absolute; inset: 0; width: 100%; height: 100%; }
.card-inner { position: relative; align-self: center; padding: 96px var(--pad) 48px; max-width: 1200px; width: 100%; margin: 0 auto; }

.mono { font: 500 13px/1 var(--mono); letter-spacing: .04em; color: var(--ink-2); margin: 0 0 36px; display: inline-flex; align-items: center; gap: 12px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: pulse 3.2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--net), .45); } 70% { box-shadow: 0 0 0 10px rgba(var(--net), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--net), 0); } }

h1 { margin: 0; font-weight: 700; font-size: clamp(3.4rem, 13vw, 10.5rem); line-height: .88; letter-spacing: -.055em; }
.line { margin: 32px 0 0; font-size: clamp(1.25rem, 2.6vw, 2.1rem); line-height: 1.15; letter-spacing: -.02em; color: var(--ink-2); font-weight: 500; }
.mail { display: inline-flex; align-items: center; gap: 12px; margin-top: 44px; font: 500 clamp(15px, 1.6vw, 18px)/1 var(--mono); text-decoration: none; padding: 14px 18px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(6px); transition: border-color .2s, color .2s; }
.mail svg { width: 16px; height: 16px; color: var(--accent); transition: transform .25s; }
.mail:hover { border-color: var(--accent); color: var(--accent); }
.mail:hover svg { transform: translateX(4px); }

.card-foot { position: relative; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px var(--pad) 28px; font: 400 12px/1.4 var(--mono); color: var(--ink-2); max-width: 1200px; width: 100%; margin: 0 auto; }
.card-foot a { text-decoration: none; margin-left: 20px; }
.card-foot a:first-child { margin-left: 0; }
.card-foot a:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) { .dot { animation: none; } .mail svg { transition: none; } }

/* Rechtstexte (impressum.html, datenschutz.html) */
.top { position: fixed; inset: 0 0 auto 0; padding: 16px var(--pad); background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); z-index: 5; }
.mark { font: 500 14px/1 var(--mono); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.mark-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.legal { padding: 120px 0 80px; }
.wrap { max-width: 860px; margin: 0 auto; padding: 0 var(--pad); }
.legal h1 { font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1; letter-spacing: -.04em; margin-bottom: 36px; }
.legal h2 { font-size: 1.2rem; margin: 36px 0 8px; letter-spacing: -.01em; }
.legal p { color: var(--ink-2); max-width: 68ch; line-height: 1.6; }
.legal a { color: var(--accent); }
.back { font: 500 13px/1 var(--mono); text-decoration: none; color: var(--ink-2); display: inline-block; margin-bottom: 28px; }
.foot { border-top: 1px solid var(--line); padding: 24px 0 36px; font: 400 12px/1.4 var(--mono); color: var(--ink-2); }
.foot-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot-links { display: flex; gap: 20px; }
.foot a { text-decoration: none; }