/* Minimalistischer One-Pager (Visitenkarte) */
:root{
  --bg:#ffffff;
  --fg:#0e1621;
  --muted:#5b6773;
  --brand:#113a6b;
  --border:#e6e9ec;
  --pad:clamp(16px, 5vw, 32px);
  --max: 1040px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--fg);
  background:var(--bg);
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.container{max-width:var(--max); margin-inline:auto; padding:0 var(--pad)}

.site-header{
  background:var(--bg);
  border-bottom:1px solid var(--border);
  padding-block:10px;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}

.brand{font-weight:700; color:var(--brand); font-size:1.1rem}
.top-mail{color:var(--brand); text-decoration:none; font-size:0.95rem}
.top-mail:hover{text-decoration:underline}

/* ab hier bleibt alles wie bisher */
.hero{padding-block:calc(var(--pad)*1.2); border-bottom:1px solid var(--border)}
.hero-grid{display:grid; align-items:center; gap:24px; grid-template-columns:1.2fr .8fr}
.hero h1{font-size:clamp(28px,4vw,42px); margin:0 0 4px}
.subtitle{color:var(--brand); font-weight:700; margin:0}
.tagline{color:var(--muted); font-weight:600; margin:4px 0 0}
.hero-photo img{
  display:block; width:100%; max-width:240px; aspect-ratio:4/5; object-fit:cover;
  border-radius:14px; margin-inline:auto; box-shadow:0 6px 28px rgba(17,58,107,.12)
}

.section{padding-block:calc(var(--pad)*1.2); border-bottom:1px solid var(--border)}
.section h2{font-size:clamp(22px,3vw,28px); margin:0 0 10px; color:var(--brand)}
.section p{max-width:75ch}
ul{padding-left:1.1em}
.checks li{list-style:"✓  "; padding-inline-start:.2em; margin:.2em 0}

.contact{text-align:center}
.contact a{color:var(--brand)}

.references .logos{
  display:grid; gap:20px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:center; justify-items:center;
}
.references img{max-width:180px; max-height:72px; width:auto; height:auto; filter:saturate(0.95)}

@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr; text-align:left}
  .hero-photo{order:-1}
  .hero-photo img{max-width:320px}
  .references .logos{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.site-footer{padding-block:18px; border-top:1px solid var(--border); text-align:center}
.site-footer small{color:var(--muted)}