<style>
:root{
      --ink:#111318;
      --muted:#5f6b7a;
      --bg:#fafafa;
      --brand:#4B2E83;
      --brand-ink:#4B2E83;
      --accent:#6AA9FF;
      --radius:16px;
      --shadow:0 10px 30px rgba(0,0,0,.08);
      --grad-hero: linear-gradient(180deg, #8db5ff 0%, #a68cff 45%, #fceae1 100%);
      --grad-cta:  linear-gradient(180deg, #8db5ff 0%, #fceae1 100%);
      --card:#fafafb;
      --max: 1120px;
    }
   html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Space Mono", monospace;font-weight:400}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin-inline:auto;padding:0 20px}


header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.8);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid rgba(0,0,0,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-weight:700;letter-spacing:.2px}
nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0}
nav a{display:block;padding:8px 10px;border-radius:999px;font-weight:600}
nav a:hover{background:#f2f3f5}
.menu-btn{display:none}


.hero{background:var(--grad-hero);color:white;text-align:center;padding:140px 16px 120px;border-bottom:1px solid rgba(255,255,255,.2)}
.hero h1{font-size: clamp(36px, 8vw, 88px);line-height:1.02;margin:0 0 18px;font-weight:700}
.hero p{font-size: clamp(18px,2.3vw,22px);max-width: 820px;margin: 0 auto 28px;font-weight:400;letter-spacing:.2px}
.cta{display:inline-block;border:2px solid rgba(255,255,255,.9);color:white;padding:14px 22px;border-radius:999px;font-weight:700;letter-spacing:.3px}
.cta:hover{background:rgba(255,255,255,.1)}


section{padding:80px 0}
h2{font-size: clamp(28px,4.5vw,44px);margin:0 0 28px;font-weight:700;color:var(--brand-ink)}
.lead{font-size:18px;color:var(--muted);max-width:800px}


.pill{display:inline-block;background:#eceafd;color:#3a2f79;padding:8px 14px;border-radius:999px;font-weight:700;letter-spacing:.3px;margin-bottom:18px}
.grid-2,.grid-3,.grid-4{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--card);border:1px solid rgba(0,0,0,.06);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.card h3{margin:0 0 10px;font-size:22px;color:#3a2f79}
.card p{margin:0;color:var(--ink)}
.card ul{margin:12px 0 0 18px;color:var(--muted)}


.service{background:white;border:1px solid rgba(0,0,0,.06);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);text-align:center}
.service svg{width:44px;height:44px;margin-bottom:14px;color:var(--brand)}
.service h3{margin:0 0 8px}
.service p{margin:0;color:var(--muted)}


.band{background:var(--grad-cta);color:white;text-align:center;padding:80px 16px;border-radius:24px}
.band h2{color:white;margin-bottom:10px}
.band p{max-width:740px;margin:0 auto 20px;color: rgba(255,255,255,.92)}
.band .cta{border-color:white}

.about-grid {display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px;}
.about-photo img {width: 100%;  border-radius: 16px;  box-shadow: 0 10px 30px rgba(0,0,0,.08);  object-fit: cover;}
.about-text h2 {  margin-top: 0;  font-family: 'Inter', sans-serif;
  font-weight: 700;  color: var(--brand-ink);}
.about-text p {  text-align: justify;  text-justify: inter-word;}



.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.contact-item{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.label{font-family:"Space Mono", monospace;color:var(--accent);font-weight:700;letter-spacing:.3px}
.value{font-size:20px;margin-top:6px}


footer{padding:40px 0;color:#6b7280;border-top:1px solid rgba(0,0,0,.06)}


.panel{background:#3a2f79;color:#d7dafe;padding:70px 0}
.panel h2{color:#b8c6ff}
.panel .card{background:transparent;border-color:rgba(255,255,255,.18);box-shadow:none}
.panel .card h3{color:#b8c6ff}
.panel .card ul{color:#e6e9ff}


@media (max-width: 900px){
.grid-4{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:1fr}
.grid-2{grid-template-columns:1fr}
nav ul{display:none}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid rgba(0,0,0,.1)}
.mobile-nav{display:none;flex-direction:column;gap:10px;padding:12px 0}
.mobile-nav a{padding:10px;border-radius:10px}
.mobile-nav a:hover{background:#f2f3f5}
}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
}

/* === Spacing-Optimierung === */

.hero {padding: 230px 20px 190px; /* mehr Luft oben/unten */}
.hero h1 {margin-bottom: 32px; /* mehr Abstand zur Subline */}
.hero p {margin-bottom: 40px; /* mehr Abstand zum CTA */ }


section {padding: 120px 0;}

.panel {padding: 110px 0;}

.card, .service {padding: 32px;}

h2 {margin: 0 0 32px;}

.pill {margin-bottom: 24px;}

.band {padding: 100px 20px; border-radius: 32px; }

/* === Typografie-Optimierung === */

/* Headlines in Inter */
h1, h2, h3, h4, h5, h6,
.hero h1, .panel h2, .band h2 {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;}

/* Body in Space Mono */
body, p, li, .lead, .pill, .cta, .value, .label {
  font-family: "Space Mono", monospace;
  font-weight: 400;}

/* Header/Navi ausblenden */
header, .nav, nav {display: none !important; }

</style>
