html{box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:#fff;text-decoration:none;transition:color .2s ease,border-color .2s ease}
a:hover,a:focus{color:#cfcfcf;border-bottom:1px dotted #cfcfcf}
.hero{display:grid;place-items:center;padding:4rem 1rem 2rem}
.logo{width:min(300px,70vw);height:auto;display:block}

/* Persons grid (desktop default) */
.namegrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:#fff; /* white stripe across for desktop */
  color:#000;
  text-align:center;
  row-gap:0;
}
.person{display:flex;flex-direction:column}
.person .name{padding:.75rem 1rem;font-size:1.1rem}
.person .tel{background:#000;color:#fff;padding:.75rem 1rem}
.person .tel a{color:#fff;text-decoration:none;font-size:1.1rem}

/* Middle block */
.contact-center{
  text-align:center;
  padding:1.25rem 1rem 2rem;
  font-size:1.1rem;
}
.contact-center .row{
  display:grid;
  grid-template-columns:max-content max-content;
  column-gap:0.25rem;
  justify-content:center;
  margin:.25rem 0;
}
.contact-center .row span{margin:0}
.contact-center p{margin:.35rem 0}

/* Footer */
.site-footer{text-align:center;color:#cfcfcf;padding:2rem 1rem}
.muted-link{color:#cfcfcf}
.muted-link:hover,.muted-link:focus{color:#e0e0e0;border-bottom:1px dotted #e0e0e0}

/* Mobile stacking */
@media(max-width:700px){
  .hero{padding:2rem 1rem 1rem}
  .namegrid{grid-template-columns:1fr; background:transparent;}
  .person{text-align:center; margin-bottom:1rem;}
  .person .name{background:#fff; color:#000;}
  .person .tel{background:#000; color:#fff;}

  /* Abstand zwischen Logo und erstem Namen */
  .namegrid .person:first-child {margin-top:1rem;}
}