/* ==========================================================================
   Mantel Elektro — digitale Visitenkarte (eine Section)
   Dark Electric · reaktive Animationen (Tilt, Spotlight, Magnetic, Funken)
   ========================================================================== */

:root {
  --bg:      #060A14;
  --bg-2:    #0A1224;
  --card:    #0E1830;
  --card-2:  #101E3A;
  --line:    rgba(120,160,230,.16);
  --text:    #EEF3FB;
  --dim:     #A7B7D6;
  --faint:   #6478A0;
  --accent:  #3B9BFF;
  --accent-2:#1E6BEA;
  --spark:   #7CE0FF;
  --glow:    rgba(59,155,255,.5);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease: cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font); color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  min-height: 100vh; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent); color: #04121f; }

/* ---------- Bühne (eine Section, füllt den Screen) ---------- */
.stage {
  position: relative; min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center; gap: 1.25rem;
  grid-template-rows: 1fr auto;
  padding: clamp(1rem, 4vw, 3rem);
  perspective: 1400px;
}

/* animierte Aurora / „Strom"-Hintergrund */
.aurora {
  position: fixed; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38rem 30rem at 20% 25%, rgba(59,155,255,.22), transparent 60%),
    radial-gradient(34rem 30rem at 82% 30%, rgba(124,224,255,.14), transparent 60%),
    radial-gradient(40rem 34rem at 60% 92%, rgba(30,107,234,.20), transparent 62%);
  filter: blur(8px);
  animation: aurora 18s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes aurora {
  from { transform: translate3d(-2%,-1%,0) scale(1); }
  to   { transform: translate3d(3%,2%,0) scale(1.08); }
}

/* ---------- Karte ---------- */
.card {
  position: relative; width: min(940px, 100%);
  border-radius: 26px;
  background: linear-gradient(180deg, var(--card-2), var(--card));
  transform: rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));
  transform-style: preserve-3d;
  transition: transform .35s var(--ease-out);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.8), 0 0 0 1px var(--line);
  align-self: center;
}
.card.tilting { transition: transform .08s linear; }
/* rotierender Verlaufs-Rand (reactbits „Star/Gradient Border") */
.card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: 0; padding: 1px;
  background: conic-gradient(from var(--a,0deg), transparent 0 55%, var(--accent) 72%, var(--spark) 82%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .8; animation: spin 7s linear infinite;
}
@keyframes spin { to { --a: 360deg; } }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* Cursor-Spotlight */
.card-spot {
  position: absolute; inset: 0; border-radius: inherit; z-index: 1; pointer-events: none;
  background: radial-gradient(16rem 16rem at var(--mx,50%) var(--my,0%), rgba(124,224,255,.14), transparent 60%);
  opacity: 0; transition: opacity .3s var(--ease);
}
.card:hover .card-spot { opacity: 1; }

.card-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(1.25rem, 3vw, 2.25rem);
  padding: clamp(1.25rem, 2.5vw, 1.9rem);
  align-items: stretch;
}

/* Foto */
.card-photo {
  position: relative; border-radius: 18px; overflow: hidden; min-height: 15rem;
  border: 1px solid var(--line); transform: translateZ(40px);
  box-shadow: 0 24px 50px -30px rgba(0,0,0,.8);
}
.card-photo img { width: 100%; height: 100%; object-fit: cover; }
.card-photo::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(6,10,20,.55)); }
.photo-brand {
  position: absolute; left: 1rem; bottom: .9rem; z-index: 1;
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 750; letter-spacing: -0.01em; font-size: 1.05rem; color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.bolt { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 7px;
  color: #fff; background: linear-gradient(180deg, var(--accent), var(--accent-2)); box-shadow: 0 4px 14px -4px var(--glow); }
.bolt svg { width: .85rem; height: .85rem; }

/* Body */
.card-body { transform: translateZ(28px); display: flex; flex-direction: column; }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 600; color: var(--dim); margin-bottom: .9rem; letter-spacing: .01em; }
.live { width: .5rem; height: .5rem; border-radius: 50%; background: var(--spark); box-shadow: 0 0 0 0 rgba(124,224,255,.6); animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(124,224,255,.55);} 70%{box-shadow:0 0 0 .5rem rgba(124,224,255,0);} 100%{box-shadow:0 0 0 0 rgba(124,224,255,0);} }

.name { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 750; line-height: 1.05; letter-spacing: -0.035em; }
.name-sub { color: var(--dim); font-weight: 550; }
.tag { margin-top: .7rem; font-size: 1.08rem; color: var(--text); font-weight: 550; }
/* Shiny-Text (reactbits) auf einem Wortteil */
.shine {
  background: linear-gradient(100deg, var(--accent) 20%, #fff 42%, var(--spark) 55%, var(--accent) 78%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 4.5s linear infinite;
}
@keyframes shine { to { background-position: -220% 0; } }
.scope { margin-top: .5rem; color: var(--faint); font-size: .92rem; }

.contact { margin: 1.4rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.25rem; }
.contact dt { font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); margin-bottom: .18rem; }
.contact dd { font-size: 1rem; }
.contact a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s var(--ease); }
.contact a:hover { border-bottom-color: var(--accent); }

.actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: .7rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.35rem; border-radius: 999px; font-weight: 600; font-size: .98rem; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer; will-change: transform;
  transition: transform .12s ease-out, background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:active { transform: scale(.96); }
.btn .ico { width: 1.1em; height: 1.1em; }
.btn-primary { background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 10px 26px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,.22); }
.btn-primary:hover { box-shadow: 0 16px 34px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,.22); }
.btn-ghost { background: rgba(255,255,255,.03); color: var(--text); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--accent); background: rgba(59,155,255,.09); }

/* Legal */
.legal { font-size: .76rem; color: var(--faint); text-align: center; align-self: end; }
.legal a { color: var(--dim); text-decoration: none; }
.legal a:hover { color: var(--accent); }

/* Klick-Funken (reactbits „Click Spark") */
.spark {
  position: fixed; z-index: 9999; width: 3px; height: 3px; border-radius: 50%;
  background: var(--spark); box-shadow: 0 0 6px 1px var(--spark); pointer-events: none;
  animation: sparkfly .5s ease-out forwards;
}
@keyframes sparkfly { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }

/* ---------- Reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(14px); filter: blur(6px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), filter .6s var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; filter: none; }
.card-body [data-reveal].is-in:nth-child(2){transition-delay:.05s;}
.card-body [data-reveal].is-in:nth-child(3){transition-delay:.1s;}
.card-body [data-reveal].is-in:nth-child(4){transition-delay:.15s;}
.card-body [data-reveal].is-in:nth-child(5){transition-delay:.2s;}
.card-body [data-reveal].is-in:nth-child(6){transition-delay:.25s;}

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .card { transform: none !important; }
  .card-inner { grid-template-columns: 1fr; }
  .card-photo { min-height: 12rem; aspect-ratio: 6/5; }
  .card-photo, .card-body { transform: none; }
  .contact { grid-template-columns: 1fr 1fr; }
  .actions .btn { flex: 1; }
}
@media (max-width: 420px) {
  .contact { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion / transparency / contrast ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1; transform: none; filter: none; }
  .card { transform: none !important; }
  .aurora, .card::before, .shine, .live { animation: none !important; }
  .shine { color: var(--accent); background: none; -webkit-text-fill-color: currentColor; }
}
@media (prefers-contrast: more) {
  :root { --dim:#C8D6EE; --line: rgba(150,185,240,.4); }
}