/* ——— Grundlayout ——————————————— */
:root {
  --accent: #0369e0;
  --bg: #f5f7fa;
  --fg: #0b0d12;
  --radius: .5rem;
  --max-w: 1100px;
  --font-content: "Helvetica Neue", Arial, sans-serif;
}
*       { box-sizing: border-box; margin:0; padding:0; }
body    { font:16px/1.6 var(--font-content); background:var(--bg); color:var(--fg); }
header  { background:#fff; border-bottom:1px solid #ddd; }
header,
footer  { width:100%; }
header nav, main, footer { margin:0 auto; max-width:var(--max-w); padding:1rem; }
nav     { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
nav a, nav button {
  text-decoration:none; padding:.5rem 1rem; border-radius:var(--radius);
  background:none; border:1px solid transparent; cursor:pointer; font-weight:600;
}
nav a      { color:var(--fg); }
nav a.active,
.cta        { border-color:var(--accent); color:var(--accent); }
.cta:hover  { background:var(--accent); color:#fff; }
.hero   { padding:3rem 1rem 4rem; text-align:center; }
.hero h2 { margin-bottom:1rem; }
footer { text-align:center; font-size:.875rem; color:#555; }
/* Zentrierte Card (Login-Platzhalter & Passwort Gate) */
.center, .protected { display:flex; justify-content:center; align-items:center; min-height:100vh; }
.card   { background:#fff; padding:2rem; border-radius:var(--radius); width:clamp(320px, 90vw, 420px);
          box-shadow:0 4px 14px rgb(20 25 40 / .1); text-align:center; }
.card input, .card button { width:100%; margin-top:.75rem; }
.hint  { font-size:.8rem; color:#666; margin-top:1rem; }
/* ===== CV & Skills ===== */
#cv-wrapper { max-width:var(--max-w); margin:2rem auto; padding:0 1rem; }
section     { margin-top:2.5rem; }
.timeline   { list-style:none; border-left:3px solid var(--accent); padding-left:1.25rem; }
.timeline li{ margin-bottom:1.25rem; }
.timeline span{ display:inline-block; min-width:120px; font-weight:600; color:var(--accent); }
.skill-set  { display:grid; gap:1rem; }
@media (min-width:600px){ .skill-set{ grid-template-columns:1fr 1fr; } }
.skill   { background:#fff; border-radius:var(--radius); padding:1rem; box-shadow:0 2px 6px rgb(0 0 0 / .06); }
.skill span{ display:block; margin-bottom:.5rem; font-weight:600; }
.bar     { height:6px; background:#e0e5ec; border-radius:3px; overflow:hidden; }
.bar::before{ content:''; display:block; height:100%; width:0%; background:var(--accent); transition:width 1.4s ease-out; }
/* Kontaktform */
form     { display:flex; flex-direction:column; gap:1rem; }
.grid-2  { display:grid; gap:1rem; grid-template-columns:1fr 1fr; }
input, textarea, button{
  font:inherit; padding:.75rem 1rem; border:1px solid #c3c9d1; border-radius:var(--radius);
}
button   { background:var(--accent); color:#fff; border:1px solid var(--accent); cursor:pointer; }
button:hover{ opacity:.92; }
.note    { font-size:.75rem; color:#555; }
/* Dunkles Overlay für Auth-Gate auf Mobile */
@media (max-width:500px){ .protected{background:#eef1f6;} }