:root{
  --bg:#f6f7f8;
  --muted:#6b7280;
  --text:#263238;
  --accent:#f59e0b;
  --brand:#334155;
  --card:#ffffff;
  --shadow: 0 8px 24px rgba(18,24,33,0.06);
  --radius:14px;
  --max-width:900px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:linear-gradient(180deg,var(--bg),#ffffff);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
}
.wrap{
  width:100%;
  max-width:var(--max-width);
  background:var(--card);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:36px;
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  align-items:center;
}
header{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
}
.logo{
  display:flex;
  align-items:center;
  gap:12px;
}
.logo img{height:44px;}
.brand{font-weight:700;color:var(--brand);font-size:18px;line-height:1}
.subbrand{font-size:13px;color:var(--muted);margin-top:4px}
h1{
  margin:0;
  font-size:40px;
  line-height:1.05;
  text-align:center;
  color:var(--brand);
}
.lead{font-size:16px;color:var(--muted);text-align:center}
.illustration{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  position:relative;
  min-height:320px;
}
.caption{font-size:13px;color:var(--muted);text-align:center}
@media (max-width:720px){
  h1{font-size:28px}
  .logo img{height:36px;}
  .wrap{padding:12px;}
  .scene {
    width:100% !important;
    min-width:0;
    max-width:100vw;
    height:220px !important;
  }
  .illustration {
    padding:8px;
    min-height:180px;
  }
  .brand { font-size:15px; }
  .subbrand { font-size:11px; }
  .lead { font-size:14px; }
  .meta .pill { font-size:12px; padding:6px 8px; }
  .meta-icons a { font-size:22px; }
  .copyright { font-size:11px; }
  .scene i, .scene img {
    max-width:48px;
    max-height:48px;
    font-size:32px !important;
  }
  #cloud1 { left:10px !important; top:30px !important; font-size:48px !important; }
  #cloud2 { left:60px !important; top:20px !important; font-size:38px !important; }
  #cloud3 { left:120px !important; top:35px !important; font-size:56px !important; }
  #cloud4 { left:180px !important; top:60px !important; font-size:32px !important; }
  #cloud5 { left:220px !important; top:50px !important; font-size:28px !important; }
  img[alt="Server Icon"] {
    left:90px !important;
    top:90px !important;
    width:80px !important;
  }
  img[alt="Robot Icon"] {
    left:180px !important;
    top:140px !important;
    width:40px !important;
  }
  #bg-canvas { display:none !important; }
}
.meta{display:flex;justify-content:center;gap:12px;margin-top:6px}
.meta .pill{background:#f1f5f9;padding:8px 12px;border-radius:999px;color:var(--muted);font-size:13px}
/* Wolken-Animation */
@keyframes cloud-move {
  0% { transform: translateX(0); opacity: 0; }
  15% { opacity: 0.95; }
  80% { opacity: 0.95; }
  100% { transform: translateX(120px); opacity: 0.2; }
}

/* Chatbot Wackel-Animation */
@keyframes robot-wiggle {
  0% { transform: translateX(0) rotate(0deg); }
  20% { transform: translateX(-3px) rotate(-2deg); }
  40% { transform: translateX(3px) rotate(2deg); }
  60% { transform: translateX(-2px) rotate(-1deg); }
  80% { transform: translateX(2px) rotate(1deg); }
  100% { transform: translateX(0) rotate(0deg); }
}
.robot-anim { animation: robot-wiggle 1.2s ease-in-out infinite; }
.meta-icons {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 16px;
}
.meta-icons a {
  font-size: 20px;
  transition: color 0.2s;
}
.meta-icons a[title="LinkedIn"] { color: #0a66c2; }
.meta-icons a[title="Webseite"] { color: #334155; }
.copyright {
  text-align: center;
  color: #6b7280;
  font-size: 13px;
  margin-top: 18px;
}


#custom-cursor {
  position: fixed;
  pointer-events: none; /* Maus klickt weiterhin durch */
  z-index: 9999;
  font-size: 28px;
  color: #f59e0b;
  transform: translate(-50%, -50%);
  display: none; /* standardmäßig unsichtbar */
}
.scene {
  cursor: default; /* normale Maus außerhalb Cursor */
}