/* CodeClass Starter Styles – system fonts, hohe Lesbarkeit */
:root{
  --bg: #0f1221;
  --bg-soft: #161a33;
  --text: #e8ecff;
  --muted: #b8c0ff;
  --brand: #7c3aed;   /* violett */
  --brand-2: #22d3ee; /* cyan */
  --accent: #00e38a;  /* grün */
  --card: #141833;
  --white: #ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Verdana, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 20% -10%, rgba(124,58,237,.25), transparent 60%),
              radial-gradient(800px 600px at 110% 10%, rgba(34,211,238,.2), transparent 60%),
              var(--bg);
  line-height:1.6;
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; backdrop-filter: blur(6px);
  background: rgba(15,18,33,.65); border-bottom:1px solid rgba(255,255,255,.07);
}

.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:700}
.brand img{height:36px; width:auto}
.brand-text{font-size:1.1rem; letter-spacing:.3px}

.nav a{color:var(--text); opacity:.9; margin-left:16px; text-decoration:none; font-size:.95rem}
.nav a:hover{opacity:1}

/* Buttons */
.button{
  display:inline-block; padding:10px 16px; border-radius:12px;
  border:1px solid rgba(255,255,255,.15); text-decoration:none; color:var(--text);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
}
.button.primary{background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: var(--white); border:none}
.button.ghost{background:transparent}
.button.white{background:var(--white); color:#111; border:none}

/* Hero */
.hero{display:grid; grid-template-columns:1.2fr 1fr; gap:32px; padding:56px 20px; align-items:center}
.hero h1{font-size:clamp(2rem, 3.4vw, 3rem); line-height:1.15; margin:0 0 12px}
.hero p{margin:0 0 12px}
.cta-row{display:flex; gap:12px; margin:18px 0 6px}

.logo-hero{width:220px; height:auto; filter: drop-shadow(0 10px 20px rgba(0,0,0,.45)); transform: translateZ(0)}
.code-glow{width:260px; height:260px; border-radius:50%; background: radial-gradient(circle, rgba(124,58,237,.25), rgba(34,211,238,.2) 60%, transparent 70%); filter: blur(20px); position:absolute; transform: translate(10px,-220px);}

/* Karten / Beispiele */
.cards{padding:24px 20px 8px}
.cards h2{font-size:1.6rem; margin:0 0 10px}
.grid{display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:16px}
.card{background: var(--card); padding:16px; border-radius:16px; border:1px solid rgba(255,255,255,.06)}
.card h3{margin:4px 0 8px; font-size:1.1rem}
.link{color: var(--brand-2); text-decoration:none}

/* Kurse */
.split{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; padding:24px 20px}
.split .bullet{margin:0; padding-left:18px}

.dots{height:140px; background:
  radial-gradient(circle at 10px 10px, var(--brand) 2px, transparent 3px) 0 0/ 24px 24px,
  radial-gradient(circle at 10px 10px, var(--brand-2) 2px, transparent 3px) 12px 12px/ 24px 24px;
  border-radius:16px; opacity:.7; border:1px solid rgba(255,255,255,.06)}

/* Workshops */
.accent{padding:28px 20px; background:
  linear-gradient(90deg, rgba(124,58,237,.15), rgba(34,211,238,.15));
  border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08)
}

/* About + Kontakt */
.about, .contact{padding:28px 20px}
.contact-form{display:grid; gap:10px; max-width:520px}
.contact-form label{display:grid; gap:6px}
.contact-form input, .contact-form textarea{
  width:100%; padding:10px 12px; border-radius:10px; background:#0e1228; color:var(--text);
  border:1px solid rgba(255,255,255,.12)
}

/* Footer */
.site-footer{padding:24px 20px; text-align:center; opacity:.8; border-top:1px solid rgba(255,255,255,.07)}

/* Layoutbegrenzung */
.hero, .cards, .split, .accent, .about, .contact{max-width:1100px; margin:0 auto}

/* Responsive */
@media (max-width: 880px){
  .hero{grid-template-columns:1fr; text-align:center}
  .cta-row{justify-content:center}
  .hero-art{display:flex; justify-content:center; position:relative}
  .code-glow{transform: translate(-20px,-220px)}
  .nav{display:none}
}

/* Fokus sichtbar für Tastaturnutzer */
a:focus, button:focus, input:focus, textarea:focus {
  outline: 3px solid var(--brand-2);
  outline-offset: 2px;
}