/* Visitenkarte me.pfix.it – Startseite (aus index.html ausgelagert wegen CSP) */
:root {
  --bg: #0B0E14;
  --card: rgba(20, 25, 36, 0.72);
  --accent: #00F5D4;       /* Brand türkis */
  --accent2: #4D9FFF;      /* Brand blau */
  --pink: #FF3EA5;         /* Brand pink */
  --verlauf: linear-gradient(135deg, #FF3EA5, #4D9FFF, #00F5D4);
  --text: #E8EAED;
  --muted: #9AA0A6;
  --danger: #FF4757;       /* rot: Bedrohung (bewusst kein Brand-Pink) */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(circle at 30% 20%, #141c2e 0%, var(--bg) 65%);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  padding: 1.5rem;
  overflow-x: hidden;
}
#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.card {
  position: relative;
  z-index: 1;
  background: var(--card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 22px;
  padding: 2.5rem 2rem;
  max-width: 400px;
  width: 100%;
  margin: auto;
  text-align: center;
  box-shadow: 0 25px 60px rgba(0,0,0,0.5);
  border: 1px solid rgba(77, 159, 255, 0.25);
}

/* Sprachschalter */
.lang {
  position: absolute;
  top: 14px; right: 14px;
  display: flex; gap: 2px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  padding: 3px;
}
.lang button {
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--muted);
  font: 600 0.72rem/1 inherit;
  padding: 5px 9px;
  border-radius: 999px;
  transition: all 0.15s ease;
}
.lang button.active { background: var(--verlauf); color: #0B0E14; }

/* Avatar: Brand-Icon (›p im Verlauf), sanft wabernd */
.avatar {
  position: relative;
  --ring: rgba(0, 245, 212, 0.6);
  width: 110px; height: 110px;
  border-radius: 50%;
  margin: 0.5rem auto 1.25rem;
  transition: box-shadow 0.5s ease;
}
.avatar img {
  display: block;
  width: 100%; height: 100%;
  border-radius: 50%;
  animation: wabern 4s ease-in-out infinite;
}
/* Scan-Ring ums Emblem: türkis = gesund, rot + schnell = Vorfall */
.avatar::before {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 2px dashed var(--ring);
  animation: scan 14s linear infinite;
  transition: border-color 0.5s ease;
}
.avatar.alert { --ring: var(--danger); box-shadow: 0 0 30px rgba(255, 71, 87, 0.45); }
.avatar.alert::before { animation-duration: 3s; }
@keyframes scan { to { transform: rotate(360deg); } }
@keyframes wabern {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(-4px) rotate(-3deg); }
  60%      { transform: translateY(2px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .avatar img, .avatar::before { animation: none; }
}

h1 { font-size: 1.5rem; margin-bottom: 0.25rem; }
.role { color: var(--accent); font-weight: 500; margin-bottom: 0.5rem; }
.slogan { font-style: italic; font-size: 1.05rem; color: var(--text); margin-bottom: 1rem; }
/* Wortspiel: P(fisterer) + fix IT = pfix.it */
.slogan .hl, .slogan strong {
  font-weight: 700;
  color: var(--accent);
  background: var(--verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.slogan .rest { color: var(--muted); opacity: 0.6; }
.slogan strong { font-style: normal; }
.bio { color: var(--muted); font-size: 0.9rem; line-height: 1.55; margin-bottom: 1.75rem; text-align: left; }
.links { display: flex; flex-direction: column; gap: 0.75rem; }
.links .noscript { margin-top: -0.25rem; font-size: 0.85rem; color: var(--muted); }
.links a {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.links a:hover, .links a:focus-visible { background: var(--verlauf); border-color: transparent; color: #0B0E14; transform: translateY(-2px); }
/* Live-Systemstatus */
.status {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--muted);
  background: rgba(0, 245, 212, 0.08);
  border: 1px solid rgba(0, 245, 212, 0.25);
  transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
.status .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: blink 2s ease-in-out infinite;
  flex-shrink: 0;
}
.status small { opacity: 0.75; }
.status.alert {
  background: rgba(255, 71, 87, 0.1);
  border-color: rgba(255, 71, 87, 0.35);
  color: #FFA3AB;
}
.status.alert .dot { background: var(--danger); box-shadow: 0 0 8px var(--danger); animation-duration: 0.6s; }
@keyframes blink { 50% { opacity: 0.35; } }

footer { margin-top: 1.5rem; font-size: 0.8rem; color: var(--muted); }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--accent); }

/* Kleine Bildschirme */
@media (max-width: 480px) {
  body { padding: 0.75rem; }
  .card { padding: 2.25rem 1.25rem 1.5rem; }
  .avatar { width: 88px; height: 88px; }
  h1 { font-size: 1.3rem; }
  .bio { font-size: 0.86rem; }
}

/* Köder-Silbe der E-Mail-Adresse (mail.js) */
.k { display: none; }