:root{--blue:#005ea2;--blue-soft:#e8f2ff;--ink:#333;--bg:#f7f9fc;--card:#fff}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
.topbar{background:var(--blue);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:.8rem 1.2rem;position:sticky;top:0;z-index:10}
.logo{height:44px;border-radius:50%}.logo.small{height:36px}.sitename{font-weight:700;margin-left:.6rem}.brand{display:flex;align-items:center;gap:.6rem}
.nav a{color:#fff;margin-left:1rem;text-decoration:none;font-weight:600;opacity:.95}.nav a:hover{opacity:1;text-decoration:underline}
.hero{background:var(--blue-soft);text-align:center;padding:3.2rem 1rem}.hero h1{margin:0 0 .6rem}.hero p{margin:0;font-size:1.05rem}
.section{max-width:1100px;margin:0 auto;padding:2rem 1rem}.card{background:var(--card);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.06);padding:1.4rem 1.2rem}
.muted{opacity:.8}.refs{padding-left:1.1rem}.refs li{margin:.35rem 0}
.about{display:grid;grid-template-columns:1fr 190px;gap:1.2rem;align-items:start}
.portrait{width:190px;height:auto;border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.1)}
.portrait.right{justify-self:end}
.footer{background:#003d6a;color:#fff;text-align:center;padding:1.2rem}
@media (max-width:720px){.about{grid-template-columns:1fr}.portrait{width:170px;margin:1rem auto 0}}
.section .card{animation:floatIn .6s ease both}
@keyframes floatIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
/* Footer-Links gut sichtbar machen */
.footer a,
.footer a:link,
.footer a:visited {
  color: #ffffff;             /* weiß auf dunkelblau */
  text-decoration: underline; /* klar erkennbar als Link */
  text-underline-offset: 2px;
  font-weight: 600;
}

.footer a:hover,
.footer a:focus {
  opacity: .9;
  outline: none;
}

/* etwas Luft nach oben */
.footer p:first-child {
  margin-bottom: .6rem;
}