/* —— Design Tokens —— */
:root{
  --accent-a:#00bfa6; /* kxcq türkisgrün */
  --accent-b:#5f00ff; /* kxcq violett */
  --bg:#ffffff;
  --ink:#0b0b0b;
  --muted:#6b6b6b;
  --glass:rgba(255,255,255,.65);
  --glass-brd:rgba(0,0,0,.06);
  --grid:rgba(0,0,0,.06);
  --noise:rgba(0,0,0,.03);
  --btn-brd: color-mix(in srgb, var(--ink) 12%, transparent);
  --btn-hover: color-mix(in srgb, var(--ink) 6%, transparent);
  --btn-text: color-mix(in srgb, var(--ink) 92%, transparent);
  --focus-ring: color-mix(in srgb, var(--accent-a) 55%, transparent);
  --radius: 18px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0c0d0f;
    --ink:#f3f3f3;
    --muted:#b7b7b7;
    --glass:rgba(16,16,18,.55);
    --glass-brd:rgba(255,255,255,.08);
    --grid:rgba(255,255,255,.07);
    --noise:rgba(255,255,255,.03);
    --btn-brd: color-mix(in srgb, var(--ink) 18%, transparent);
    --btn-hover: color-mix(in srgb, var(--ink) 10%, transparent);
    --btn-text: color-mix(in srgb, var(--ink) 90%, transparent);
    --focus-ring: color-mix(in srgb, var(--accent-a) 60%, transparent);
  }
}

/* —— Base —— */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(900px 700px at 0% 0%, color-mix(in srgb, var(--accent-a) 12%, transparent) 0%, transparent 70%),
    radial-gradient(900px 700px at 100% 0%, color-mix(in srgb, var(--accent-b) 12%, transparent) 0%, transparent 70%),
    var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  display:flex; justify-content:center; align-items:center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  position:relative; overflow:hidden;
  text-wrap: pretty;
}

/* Subtle nerd grid + noise overlay */
body::before, body::after{
  content:""; position:absolute; inset:0; pointer-events:none;
}
body::before{
  background:
    repeating-linear-gradient(0deg, transparent 0 19px, var(--grid) 19px 20px),
    repeating-linear-gradient(90deg, transparent 0 19px, var(--grid) 19px 20px);
  opacity:.12;
  mask-image: radial-gradient(80% 80% at 50% 30%, rgba(0,0,0,.8), rgba(0,0,0,0));
}
body::after{
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="120" height="120" filter="url(%23n)" opacity="0.06"/></svg>');
  opacity:.2; mix-blend-mode: soft-light;
}

/* —— Glass Card —— */
.card{
  max-width: clamp(320px, 94vw, 780px);
  width:100%;
  padding:28px 26px 24px;
  border-radius:var(--radius);
  background:var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  border:1px solid var(--glass-brd);
  box-shadow:0 6px 24px rgba(0,0,0,.08);
}
@supports not (backdrop-filter: blur(10px)){
  .card{ background: color-mix(in srgb, var(--bg) 92%, transparent); }
}

/* Terminal-like header */
.term-head{
  display:flex; align-items:center; gap:10px;
  margin-bottom:14px; user-select:none;
}
.dot{width:10px; height:10px; border-radius:50%}
.dot.r{ background:#ff5f56 }
.dot.y{ background:#ffbd2e }
.dot.g{ background:#27c93f }
.title{
  margin-left:2px;
  font-size:.9rem; color:var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing:.2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width: 100%;
}

.card h1{
  font-size:clamp(1.5rem, 4.5vw, 2.1rem);
  margin:0 0 10px; font-weight:700; letter-spacing:.2px;
  position:relative; display:inline-block;
  text-wrap: balance;
}
.card h1::after{
  content:"▍";
  margin-left:.25ch;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  animation: blink 1.1s steps(2, start) infinite; opacity:.85;
}
@keyframes blink { 50% { opacity:0; } }

.lead{
  font-size:clamp(.98rem, 2.8vw, 1.05rem);
  color:var(--muted);
  margin:0 0 12px; line-height:1.6;
}

/* —— Links (dezent) —— */
.link{
  font-weight:700; text-decoration:none; color:var(--ink);
  border-bottom:2px solid transparent;
  background: linear-gradient(90deg,var(--accent-a),var(--accent-b)) left bottom/0 2px no-repeat;
  transition:background-size .2s ease;
}
.link:hover{ background-size:100% 2px }

/* Contacts as a wrap-friendly list */
.contacts{
  list-style:none; padding:0; margin:10px 0 0;
  display:flex; flex-wrap:wrap; gap:8px 14px; justify-content:center;
  font-size:.98rem; color:var(--muted);
}
.contacts li{ display:flex; align-items:center; gap:6px }
.label{ opacity:.9 }
.link-soft{
  color:inherit; text-decoration:none;
  border-bottom:1px dotted color-mix(in srgb, var(--ink) 35%, transparent);
  transition: color .2s ease, border-color .2s ease, opacity .2s ease;
  padding:6px 2px; margin:-6px -2px; /* größere Tap-Zone ohne visuelle Änderung */
  border-radius:6px; /* bessere Fingerführung */
  opacity:.95;
}
.link-soft:hover{ color:var(--ink); border-bottom-color: var(--ink); opacity:1 }

/* —— Quiet Buttons (mobile-first) —— */
.actions{ display:flex; gap:10px; margin-top:14px; justify-content:center; flex-wrap:wrap }
.btn{
  appearance:none; border:1px solid var(--btn-brd); border-radius:10px;
  min-height:44px; padding:10px 14px; font-weight:500;
  cursor:pointer; text-decoration:none; color:var(--btn-text); background: transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  flex: 1 1 240px; /* wächst auf mobile, bleibt dezent */
  text-align:center;
}
.btn:hover{ background-color: var(--btn-hover) }
.btn:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px }

.hint{ margin-top:12px; font-size:.92rem; color:var(--muted); text-wrap: balance }

/* —— Mobile tuning —— */
@media (max-width:600px){
  body{
    background:
      radial-gradient(700px 560px at 0% 0%, color-mix(in srgb, var(--accent-a) 10%, transparent) 0%, transparent 70%),
      radial-gradient(700px 560px at 100% 0%, color-mix(in srgb, var(--accent-b) 10%, transparent) 0%, transparent 70%),
      var(--bg);
  }
  body::before{ opacity:.08 }
  body::after{ opacity:.14 }
  .card{
    padding:22px 18px 18px;
    border-radius: calc(var(--radius) - 4px);
    -webkit-backdrop-filter: blur(12px) saturate(125%);
    backdrop-filter: blur(12px) saturate(125%); /* weniger Blur = bessere iOS-Perf */
  }
  .actions{ gap:8px }
  .btn{ flex:1 1 100%; } /* Buttons untereinander, volle Breite */
}

@media (prefers-reduced-motion: reduce){
  .card h1::after{ animation: none }
}