:root{
  --bg:#0f1220;
  --text:#101218;
  --muted:#6b7280;
  --brand:#1f2a6b;
  --brand-2:#3846a3;
  --card:#ffffff;
  --alt:#f6f7fb;
  --radius:16px;
  --shadow:0 10px 25px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:#fff;
}

.container{max-width:1100px;margin:0 auto;padding:0 20px}
.section{padding:72px 0}
.section.alt{background:var(--alt)}
.section-lead{color:var(--muted);margin-top:-6px}

h1,h2,h3{line-height:1.2;margin:0 0 12px 0}
h1{font-size:clamp(30px,4.2vw,44px)}
h2{font-size:clamp(24px,3vw,32px)}
h3{font-size:clamp(18px,2.3vw,22px)}
.lead{font-size:1.125rem;color:#293041}

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

.btn{
  display:inline-block;border:1px solid var(--brand);padding:12px 18px;border-radius:999px;
  text-decoration:none;font-weight:600;transition:.2s all;white-space:nowrap
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-2);border-color:var(--brand-2)}
.btn-ghost{background:transparent;color:var(--brand)}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;background:#fff;padding:8px 12px;border-radius:8px;z-index:999}

.site-header{
  position:sticky;top:0;background:#fff;border-bottom:1px solid #eef0f4;z-index:50
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:62px}
.brand{display:flex;gap:10px;align-items:center;color:var(--brand);font-weight:800}
.brand svg{color:var(--brand)}
.main-nav{display:flex;gap:16px;align-items:center}
.main-nav a{padding:8px 10px;border-radius:10px}
.main-nav a:hover{background:#f1f3f9;text-decoration:none}

.nav-toggle{display:none}
.nav-burger{display:none;width:40px;height:40px;position:relative;border-radius:8px}
.nav-burger span{position:absolute;left:9px;right:9px;height:2px;background:#111;border-radius:2px;transition:.2s}
.nav-burger span:nth-child(1){top:12px}
.nav-burger span:nth-child(2){top:19px}
.nav-burger span:nth-child(3){top:26px}

/* HERO */
.hero{padding:72px 0;background:
  radial-gradient(1200px 600px at 80% -50%, rgba(31,42,107,.12), transparent 60%),
  radial-gradient(900px 400px at -10% -30%, rgba(56,70,163,.10), transparent 60%)}
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hero-bullets{list-style:none;padding:0;margin:16px 0 0 0;display:grid;gap:6px}
.cta-row{display:flex;gap:12px;margin:18px 0 6px}

/* Cards */
.cards .card{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 18px 14px;
  border:1px solid #eef0f4
}
.cards .card ul{margin:0;padding-left:18px}

/* Stat card */
.hero-panel .stat-card{
  background:linear-gradient(135deg,#1f2a6b,#3846a3);color:#fff;border-radius:22px;padding:24px;box-shadow:var(--shadow)
}
.stat{font-weight:700;margin-bottom:8px}
.stat span{font-size:34px;display:inline-block;margin-right:6px}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:12px 0 0 0;padding:0;counter-reset:step}
.steps li{
  list-style:none;background:#fff;border:1px solid #eef0f4;border-radius:14px;padding:16px;box-shadow:var(--shadow);
  position:relative
}
.steps li::before{
  counter-increment:step;content:counter(step);position:absolute;top:-12px;left:-12px;background:var(--brand);
  color:#fff;width:32px;height:32px;display:grid;place-items:center;border-radius:999px;font-weight:700
}

/* Profile */
.profile-card{background:#fff;border:1px solid #eef0f4;border-radius:22px;box-shadow:var(--shadow);padding:18px;display:grid;gap:14px}
.profile-photo{height:160px;border-radius:16px;background:linear-gradient(135deg,#dfe4ff,#f2f4ff);display:grid;place-items:center;color:#1f2a6b;font-weight:800;font-size:22px}
.profile-meta .name{font-weight:800}
.profile-meta .role{color:var(--muted)}

/* Details (FAQ) */
details{background:#fff;border:1px solid #eef0f4;border-radius:14px;padding:14px 16px;margin:12px 0;box-shadow:var(--shadow)}
details[open]{background:#fbfcff}
.details-body{padding-top:8px;color:#374151}

/* Kontakt */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
.contact-box, .contact-form{background:#fff;border:1px solid #eef0f4;border-radius:16px;box-shadow:var(--shadow);padding:18px}
.contact-form label{display:grid;gap:6px;margin-bottom:10px}
input,textarea{
  width:100%;border:1px solid #d6dbe6;border-radius:12px;padding:12px;background:#fff;font:inherit
}
input:focus,textarea:focus{outline:3px solid #e4e8ff;border-color:#b6bff3}

/* Footer */
.site-footer{border-top:1px solid #eef0f4;background:#fff}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0}
.footer-nav{display:flex;gap:14px}
.muted{color:var(--muted)}
.small{font-size:.9rem}

/* Responsive */
@media (max-width: 980px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .main-nav{display:none;position:absolute;right:20px;top:62px;background:#fff;padding:12px;border-radius:12px;border:1px solid #eef0f4;box-shadow:var(--shadow);flex-direction:column;min-width:220px}
  .nav-burger{display:block}
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-toggle:checked ~ .main-nav{display:flex}
}
@media (max-width: 640px){
  .grid-3{grid-template-columns:1fr}
  .hero{padding:56px 0}
}
@media (prefers-color-scheme: dark){
  body{background:#0b0e18;color:#e7e9f2}
  .section.alt{background:#0f1322}
  .brand,.btn-ghost{color:#cbd5ff}
  .main-nav a:hover{background:#141a2e}
  .cards .card, .steps li, details, .profile-card, .contact-box, .contact-form{background:#0f1322;border-color:#1b2139}
  input,textarea{background:#0f1322;border-color:#1b2139;color:#e7e9f2}
  .footer-inner{border-color:#1b2139}
}

/* Anti-scrape Box + Accessibility helpers */
.imprint-box{background:#fff;border:1px solid #eef0f4;border-radius:16px;box-shadow:var(--shadow);padding:12px;margin:10px 0}
.imprint-box canvas{width:100%;height:auto;display:block}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


.imprint-box{background:#fff;border:1px solid #eef0f4;border-radius:16px;box-shadow:var(--shadow);padding:12px;margin:10px 0}
.imprint-box canvas{display:block;max-width:100%;height:auto}
@media (prefers-color-scheme: dark){
  .imprint-box{background:#0f1322;border-color:#1b2139}
}
.profile-photo {
  background: url('mein-foto.jpg') center/cover no-repeat;
  height: 160px; /* ist schon in deinem CSS */
}
.profile-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px; /* vorhandene Höhe */
  
  overflow: hidden; /* alles außerhalb abschneiden */
  background: #f2f4ff; /* Fallback-Hintergrund */
}

.profile-photo img {
  height: 100%;
  width: auto; /* verhindert Verzerrung */
  display: block;
}