/* ==========================================================================
   alessandrohacker.de — Visitenkarte
   Schwarz, Weiß, Anthrazit. Farbe gibt es nur als Lichtbrechung im Glas.
   ========================================================================== */

@font-face { font-family: "Geist Serif"; src: url("fonts/geist-serif.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --paper: #f2f2ef;
  --paper-2: #e9e9e5;
  --ink: #161617;
  --graphite: #3b3b3d;
  --mute: #86868a;
  --line: rgba(22, 22, 23, .10);
  --grid: rgba(22, 22, 23, .045);

  --serif: "Geist Serif", "Times New Roman", serif;
  --sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;

  --m: clamp(16px, 3vw, 40px);
  --g: clamp(12px, 1.6vw, 24px);
  --top: 64px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  --chrome: linear-gradient(115deg, #fdfdfd 0%, #a9a9ad 22%, #f4f4f4 40%, #77777b 58%, #e9e9ea 76%, #9d9da1 100%);
  --irid: conic-gradient(from 210deg, #ffd6ec, #d3f1ff, #e6ffd6, #fff1c7, #e2d6ff, #ffd6ec);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
figure { margin: 0; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

.skip { position: absolute; left: var(--m); top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 8px 12px; font: 500 13px var(--sans); }
.skip:focus { top: 12px; }

/* --- Gridlinien: da, aber nie präsent ---------------------------------- */
.gridlines { position: fixed; inset: 0; z-index: 0; pointer-events: none; padding: 0 var(--m); display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--g); }
.gridlines span { border-left: 1px solid var(--grid); border-right: 1px solid var(--grid); }
@media (max-width: 760px) { .gridlines { grid-template-columns: repeat(4, 1fr); } .gridlines span:nth-child(n+5) { display: none; } }

main, header { position: relative; z-index: 1; }
.wrap { padding: 0 var(--m); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); }
@media (max-width: 760px) { .wrap { grid-template-columns: repeat(4, 1fr); } }

.label { font: 400 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.label b { font-weight: 400; color: var(--ink); }

/* --- Kopfzeile ---------------------------------------------------------- */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 18px var(--m); pointer-events: none; }
.top > * { pointer-events: auto; }
.top__name { font: 500 14px/1 var(--sans); letter-spacing: -.01em; }
.top__name span { color: var(--mute); font-weight: 400; }
.clocks-mini { display: flex; gap: 18px; font: 400 11px/1 var(--mono); letter-spacing: .04em; color: var(--mute); font-variant-numeric: tabular-nums; }
.clocks-mini b { font-weight: 400; color: var(--ink); margin-left: 5px; }
@media (max-width: 900px) { .clocks-mini span:not(:first-child) { display: none; } }

/* --- Register ----------------------------------------------------------- */
.register { position: fixed; left: var(--m); bottom: var(--m); z-index: 30; min-width: 210px; padding: 14px 16px 12px; border-radius: 14px; background: rgba(242, 242, 239, .55); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(0,0,0,.05), 0 10px 30px rgba(0,0,0,.06); }
.register::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--irid); opacity: .7; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.register ol { list-style: none; margin: 0; padding: 0; }
.register li a { position: relative; display: grid; grid-template-columns: 26px 1fr; align-items: baseline; padding: 3px 0; font: 400 13px/1.35 var(--sans); color: var(--mute); transition: color .4s var(--ease); }
.register li a .n { font: 400 10px var(--mono); letter-spacing: .04em; }
.register li a:hover, .register li a.is-active { color: var(--ink); }
.register li a::after { content: ""; position: absolute; right: 0; top: 50%; width: 0; height: 2px; border-radius: 2px; background: var(--chrome); transition: width .5s var(--ease); }
.register li a.is-active::after { width: 22px; }
.register__foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; }
@media (max-width: 760px) {
  .register { left: 12px; right: 12px; bottom: 12px; min-width: 0; padding: 6px; border-radius: 999px; display: flex; justify-content: center; }
  .register ol { display: flex; gap: 2px; }
  .register li a { display: block; white-space: nowrap; padding: 7px 14px; font-size: 12px; border-radius: 999px; }
  .register li a .n, .register li a::after { display: none; }
  .register li a.is-active { background: rgba(255,255,255,.7); }
  .register__foot { display: none; }
}

/* --- Sanftes Einblenden mit Blur --------------------------------------- */
[data-reveal] { opacity: 0; filter: blur(14px); transform: translateY(.35em); transition: opacity 1.2s var(--ease), filter 1.2s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0s); }
[data-reveal].is-in { opacity: 1; filter: blur(0); transform: none; }
[data-split] .w { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(.25em); transition: opacity 1.1s var(--ease), filter 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--d, 0s) + var(--i) * 45ms); }
[data-split].is-in .w { opacity: 1; filter: blur(0); transform: none; }

/* --- Glaslinse (Cursor) ------------------------------------------------- */
.lens, .cursor-dot { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease); }
.has-lens .lens, .has-lens .cursor-dot { opacity: 1; }
.has-lens, .has-lens a, .has-lens button, .has-lens [tabindex] { cursor: none; }
.lens { width: 68px; height: 68px; margin: -34px 0 0 -34px; will-change: transform; }
.lens__glass { position: absolute; inset: 0; border-radius: 50%; -webkit-backdrop-filter: blur(2px) saturate(1.7) contrast(1.05); backdrop-filter: blur(2px) saturate(1.7) contrast(1.05); box-shadow: inset 2px 2px 2px -1px rgba(255,255,255,.95), inset -2px -2px 3px -1px rgba(0,0,0,.20), inset 0 0 14px rgba(255,255,255,.25), 0 6px 18px rgba(0,0,0,.10); transition: transform .5s var(--ease); }
.lens--refract .lens__glass { -webkit-backdrop-filter: url(#lensFilter) saturate(1.5); backdrop-filter: url(#lensFilter) saturate(1.5); }
.lens__rim { position: absolute; inset: 0; border-radius: 50%; background: var(--irid); opacity: .75; -webkit-mask: radial-gradient(circle, transparent 65%, #000 68%, #000 70.5%, transparent 73%); mask: radial-gradient(circle, transparent 65%, #000 68%, #000 70.5%, transparent 73%); transition: transform .5s var(--ease), opacity .5s var(--ease); }
.lens.is-hover .lens__glass, .lens.is-hover .lens__rim { transform: scale(1.32); }
.lens.is-hover .lens__rim { opacity: 1; }
.lens.is-down .lens__glass, .lens.is-down .lens__rim { transform: scale(.82); }
.cursor-dot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--ink); mix-blend-mode: difference; filter: invert(1); }

/* --- Start / Visitenkarte ---------------------------------------------- */
.hero { position: relative; padding-top: var(--top); }
.hero .wrap { min-height: calc(100svh - var(--top)); }

.hero__right { grid-column: 8 / 13; grid-row: 1; display: flex; flex-direction: column; padding-bottom: calc(var(--m) - 4px); }
.hero__photo { position: relative; flex: 1; min-height: 420px; overflow: hidden; background: var(--paper-2); }
.hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; transform: scale(1.06); transition: transform 2.4s var(--ease); }
.hero__photo.is-in img { transform: scale(1); }
.legal-links { display: flex; justify-content: flex-end; gap: 20px; margin: 12px 0 0; }
.legal-links a { transition: color .4s var(--ease), opacity .4s var(--ease); }
.legal-links a:hover { color: var(--ink); }
.legal-links .secret { opacity: .45; }
.legal-links .secret:hover { opacity: 1; }

.hero__left { grid-column: 1 / 8; grid-row: 1; align-self: center; padding: 0 clamp(8px, 2vw, 32px) 150px 0; }
.hero__name { margin: 0 0 clamp(22px, 3.4vh, 36px); font: 400 clamp(44px, 6.2vw, 112px)/.9 var(--serif); letter-spacing: -.025em; white-space: nowrap; }
.hero__name em { font-style: normal; }
.hero__role { margin: 0 0 18px; font: 400 13px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.hero__lead { margin: 0; max-width: 20em; font: 400 clamp(22px, 1.9vw, 30px)/1.18 var(--serif); letter-spacing: -.005em; }
.hero__lead em { font-style: normal; }

/* Sparten mit Hover-Bild */
.sparten { list-style: none; margin: clamp(24px, 3.6vh, 36px) 0 0; padding: 14px 0 0; max-width: 38em; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; row-gap: 2px; }
.sparten li { font: 400 13px/1.7 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--mute); }
.sparten li:not(:last-child)::after { content: "·"; padding: 0 .55em; color: rgba(22,22,23,.25); }
.sparte { position: relative; transition: color .35s var(--ease); outline-offset: 2px; }
.sparte::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.sparte:hover, .sparte:focus-visible, .sparte.is-key { color: var(--ink); }
.sparte:hover::after, .sparte:focus-visible::after { transform: scaleX(1); }

.peek { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; width: 170px; aspect-ratio: 4 / 5; background: var(--ink); overflow: hidden; opacity: 0; filter: blur(10px); transition: opacity .45s var(--ease), filter .45s var(--ease); will-change: transform; }
.peek.is-on { opacity: 1; filter: blur(0); }
.peek img { width: 100%; height: 100%; object-fit: cover; }
.peek span { position: absolute; left: 12px; bottom: 10px; color: rgba(242,242,239,.55); }

.hero__contact { margin: clamp(26px, 4vh, 40px) 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; }
.hero__contact a { font: 400 clamp(22px, 1.8vw, 28px)/1.1 var(--serif); background: linear-gradient(var(--ink), var(--ink)) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size .6s var(--ease); }
.hero__contact a:hover { background-size: 0 1px; background-position: 100% 100%; }

.legal-mobile { display: none; }

@media (max-width: 760px) {
  .hero { padding-top: 56px; }
  .hero .wrap { min-height: 0; }
  .hero__right { grid-column: 1 / 5; grid-row: 1; padding-bottom: 0; }
  .hero__photo { flex: none; aspect-ratio: 3 / 4; min-height: 0; }
  .hero__right .legal-links { display: none; }
  .hero__left { grid-column: 1 / 5; grid-row: 2; align-self: start; padding: 0 0 40px; }
  .hero__name { position: absolute; left: calc(var(--m) + 14px); top: 74px; z-index: 2; margin: 0; font-size: clamp(36px, 10.6vw, 60px); }
  .hero__role { margin-top: 22px; }
  .hero__lead { font-size: 23px; }
  .sparten li { font-size: 12px; }
  .peek { display: none; }
  .legal-mobile { display: flex; justify-content: flex-start; position: relative; z-index: 1; padding: 0 var(--m) 96px; }
}

/* --- Rechtstexte -------------------------------------------------------- */
.legal { padding: 140px 0 120px; }
.legal h1 { grid-column: 4 / 12; margin: 0 0 48px; font: 400 clamp(56px, 8vw, 120px)/.9 var(--serif); letter-spacing: -.02em; }
.legal__body { grid-column: 4 / 10; font: 400 16px/1.6 var(--sans); color: var(--graphite); }
.legal__body h2 { margin: 40px 0 8px; font: 400 26px/1.15 var(--serif); color: var(--ink); }
.legal__body p { margin: 0 0 12px; }
.legal__body a { border-bottom: 1px solid var(--line); }
@media (max-width: 760px) { .legal h1, .legal__body { grid-column: 1 / 5; } .legal { padding-bottom: 100px; } }

/* --- Weniger Bewegung --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], [data-split] .w { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
  .hero__photo img { transform: none; transition: none; }
}

/* Mobil: Register kompakt, weniger rund */
@media (max-width: 760px) {
  .register { left: 12px; right: auto; bottom: 12px; padding: 4px; border-radius: 10px; }
  .register li a { padding: 6px 10px; font-size: 12px; border-radius: 6px; }
}

/* Kopfzeile: beim Scrollen nicht mit Text überlagern */
.top { background: linear-gradient(var(--paper) 55%, rgba(242,242,239,0)); padding-bottom: 26px; }
/* iOS-Adresserkennung ohne Unterstreichung */
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; border: 0 !important; }

/* Keine Kursiven: em bleibt aufrecht */
em, i { font-style: normal; }
/* Geist Serif läuft breiter: Name etwas kleiner */
.hero__name { font-size: clamp(42px, 5.4vw, 98px); letter-spacing: -.03em; }
.hero__lead { letter-spacing: -.01em; }
@media (max-width: 760px) { .hero__name { font-size: clamp(32px, 9.2vw, 52px); } }