/* GHUL — dark theme with outlined cards, styled to match gnucifer.de vibe */
:root{
  --bg:#0c0c0c;
  --text:#e8e8e8;
  --muted:#bdbdbd;
  --heading:#6cb6ff;   /* hellblau */
  --link:#00c76a;      /* grün */
  --border:#2a2a2a;
  --border-strong:#3a3a3a;
  --brand:#1a1a1a;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Fira Sans", "Noto Sans", Ubuntu, Cantarell, Arial, sans-serif;
  --mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.65}

/* Layout wrapper */
.wrap{max-width:1000px;margin:0 auto;padding:1.25rem}
@media (min-width:1100px){.wrap{padding:2rem 1rem}}

header.wrap{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,var(--brand) 0%, #111 100%);
}

.brand h1{margin:0;color:var(--heading);font-size:2.6rem;letter-spacing:.4px}
.tagline{margin:.3rem 0 0;color:var(--link);font-weight:500}

.lang{display:flex;gap:.5rem}
.pill{
  background:#151515;color:var(--text);
  border:1px solid var(--border);padding:.45rem .8rem;border-radius:999px;
  font-weight:600;cursor:pointer
}
.pill.active{border-color:var(--heading);outline:2px solid rgba(108,182,255,.25)}

h2,h3{color:var(--heading);margin:.2rem 0 1rem}
h2{font-size:1.6rem}
h3{font-size:1.2rem;margin-top:1.6rem}

/* Outlined "card" blocks */
.card{
  border:1px solid var(--border);
  border-radius:12px;
  padding:1.1rem 1.2rem;
  margin:1rem 0;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.0));
  box-shadow:0 0 0 1px var(--border) inset, 0 10px 30px rgba(0,0,0,.25);
}
.card:hover{box-shadow:0 0 0 1px var(--border-strong) inset, 0 10px 30px rgba(0,0,0,.33)}

ul{padding-left:1.2rem;list-style:square}
ul li{margin:.35rem 0}
p{margin:.6rem 0 1rem}

code{font-family:var(--mono);background:#1a1a1a;color:#00ff99;padding:2px 6px;border-radius:6px}

a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

.contact{
  display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:space-between;
  margin-top:1rem;padding-top:.8rem;border-top:1px dashed var(--border);
}
.reveal{display:flex;gap:.6rem;align-items:center}
.mailto a{font-weight:700}
.muted{color:var(--muted)}

footer.foot{
  border-top:1px solid var(--border);
  text-align:center;color:#a9a9a9;margin-top:1rem
}