/* Sessantuno Development GmbH
   Stylesheet für alle Seiten. */

:root{
  --paper:#F1F0ED;
  --paper-raised:#FBFAF8;
  --ink:#23292C;
  --ink-muted:#5F686C;
  --rule:#CFCEC9;
  --rule-strong:#A8A9A5;
  --accent:#3E5C55;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{
  overflow-x:hidden;
  scroll-behavior:smooth;
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Source Serif 4', Georgia, serif;
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}

a{color:var(--accent); text-underline-offset:3px;}
a:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

.shell{
  width:100%;
  max-width:1040px;
  margin:0 auto;
  padding:0 28px;
}

.measure{max-width:36em;}

/* ---------- Kopfzeile ---------- */

.masthead{
  border-bottom:1px solid var(--rule);
  background:var(--paper);
}
.masthead .shell{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  padding-top:26px;
  padding-bottom:22px;
}
.wordmark{
  font-size:19px;
  font-weight:600;
  letter-spacing:0.005em;
  text-decoration:none;
  color:var(--ink);
  white-space:nowrap;
}
.wordmark .second{font-weight:400; color:var(--ink-muted);}

.masthead nav{
  font-family:'Archivo', system-ui, sans-serif;
  font-size:14.5px;
  display:flex;
  gap:26px;
  align-items:baseline;
  flex-wrap:wrap;
}
.masthead nav a{
  color:var(--ink-muted);
  text-decoration:none;
}
.masthead nav a:hover{color:var(--ink); text-decoration:underline;}

/* ---------- Einstieg ---------- */

.opening{
  padding:84px 0 68px;
  border-bottom:1px solid var(--rule);
}
.opening h1{
  font-size:44px;
  font-weight:600;
  line-height:1.18;
  letter-spacing:-0.015em;
  max-width:15em;
  margin-bottom:26px;
}
.opening .standfirst{
  font-size:19px;
  color:var(--ink-muted);
  max-width:34em;
}
.opening .standfirst + .standfirst{margin-top:14px;}

/* ---------- Abschnitte ---------- */

.band{
  padding:72px 0;
  border-bottom:1px solid var(--rule);
}
.band:last-of-type{border-bottom:none;}

.band > .shell > h2{
  font-size:19px;
  font-family:'Archivo', system-ui, sans-serif;
  font-weight:600;
  letter-spacing:0.005em;
  color:var(--ink);
  padding-bottom:12px;
  margin-bottom:34px;
  border-bottom:1px solid var(--rule-strong);
}

.lead-in{
  font-size:19px;
  max-width:34em;
  margin-bottom:34px;
}

/* ---------- Werkverzeichnis ---------- */

.register{
  width:100%;
  border-collapse:collapse;
  font-family:'Archivo', system-ui, sans-serif;
  font-size:15px;
}
.register caption{
  text-align:left;
  color:var(--ink-muted);
  font-family:'Source Serif 4', Georgia, serif;
  font-size:16px;
  padding-bottom:22px;
  max-width:38em;
}
.register th{
  text-align:left;
  font-weight:600;
  font-size:15px;
  color:var(--ink);
  padding:0 16px 10px 0;
  border-bottom:1px solid var(--rule-strong);
  white-space:nowrap;
}
.register td{
  padding:18px 16px 18px 0;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
}
.register tr:last-child td{border-bottom:none;}
.register .place{
  font-family:'Source Serif 4', Georgia, serif;
  font-size:19px;
  font-weight:600;
  line-height:1.3;
}
.register .place span{
  display:block;
  font-family:'Archivo', system-ui, sans-serif;
  font-size:13.5px;
  font-weight:400;
  color:var(--ink-muted);
  margin-top:3px;
}
.register td:last-child, .register th:last-child{padding-right:0;}
.register .figure{font-variant-numeric:tabular-nums; white-space:nowrap;}
.register .state{color:var(--ink-muted);}

/* ---------- Leistungen ---------- */

.services{
  border-top:1px solid var(--rule-strong);
}
.services > div{
  display:grid;
  grid-template-columns:minmax(0,15em) minmax(0,1fr);
  gap:8px 40px;
  padding:24px 0;
  border-bottom:1px solid var(--rule);
}
.services h3{
  font-size:19px;
  font-weight:600;
  line-height:1.35;
  overflow-wrap:break-word;
  hyphens:auto;
}
.services p{color:var(--ink-muted); max-width:34em;}

/* ---------- Profil ---------- */

.profile-body{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:52px;
  align-items:start;
}
.profile-body p + p{margin-top:16px;}

.company-facts{
  font-family:'Archivo', system-ui, sans-serif;
  font-size:14px;
  border-top:1px solid var(--rule-strong);
}
.company-facts div{
  padding:12px 0;
  border-bottom:1px solid var(--rule);
}
.company-facts dt{color:var(--ink-muted); font-size:13px;}
.company-facts dd{margin-top:2px;}

/* ---------- Kontakt ---------- */

.contact-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:44px;
  align-items:start;
}
.contact-body p{max-width:32em;}
.mail-action{
  display:inline-block;
  margin-top:22px;
  font-family:'Archivo', system-ui, sans-serif;
  font-size:15px;
  color:var(--paper-raised);
  background:var(--ink);
  padding:13px 24px;
  text-decoration:none;
}
.mail-action:hover{background:var(--accent);}
.card-details{
  font-family:'Archivo', system-ui, sans-serif;
  font-size:14.5px;
  line-height:1.8;
  color:var(--ink-muted);
}
.card-details strong{
  display:block;
  color:var(--ink);
  font-weight:600;
}

/* ---------- Fließtextseiten (Impressum, Datenschutz) ---------- */

.document{padding:56px 0 90px;}
.document h1{
  font-size:34px;
  font-weight:600;
  letter-spacing:-0.01em;
  padding-bottom:18px;
  margin-bottom:34px;
  border-bottom:1px solid var(--rule-strong);
}
.document section{margin-bottom:34px; max-width:38em;}
.document h2{
  font-size:19px;
  font-weight:600;
  margin-bottom:8px;
}
.document h3{
  font-size:16px;
  font-weight:600;
  color:var(--ink-muted);
  margin:18px 0 4px;
}
.document p{margin-bottom:10px;}
.document .pending{
  background:#E4E2DC;
  padding:0 5px;
  font-family:'Archivo', system-ui, sans-serif;
  font-size:14px;
}

/* ---------- Fußzeile ---------- */

.colophon{
  border-top:1px solid var(--rule-strong);
  padding:40px 0 52px;
  font-family:'Archivo', system-ui, sans-serif;
  font-size:14px;
  color:var(--ink-muted);
}
.colophon .shell{
  display:flex;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.colophon a{color:var(--ink-muted);}
.colophon a:hover{color:var(--ink);}
.colophon .legal{display:flex; gap:20px;}

/* ---------- Schmale Ansicht ---------- */

@media (max-width:760px){
  body{font-size:16.5px;}
  .shell{padding:0 20px;}

  .masthead .shell{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  .masthead nav{gap:20px;}

  .opening{padding:52px 0 44px;}
  .opening h1{font-size:31px;}
  .opening .standfirst{font-size:17.5px;}

  .band{padding:48px 0;}
  .lead-in{font-size:17.5px;}

  /* Verzeichnis wird zu Einzelblöcken */
  .register thead{
    position:absolute;
    width:1px; height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
  }
  .register, .register tbody, .register tr, .register td{display:block; width:100%;}
  .register tr{
    padding:20px 0;
    border-bottom:1px solid var(--rule);
  }
  .register tr:last-child{border-bottom:none;}
  .register td{
    padding:0;
    border:none;
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding-top:6px;
  }
  .register td:first-child{
    display:block;
    padding-top:0;
    padding-bottom:8px;
  }
  .register td[data-field]::before{
    content:attr(data-field);
    color:var(--ink-muted);
    font-size:13.5px;
    flex-shrink:0;
  }
  .register td:not(:first-child){text-align:right;}

  .services > div{grid-template-columns:minmax(0,1fr); gap:4px;}
  .profile-body{grid-template-columns:minmax(0,1fr); gap:34px;}
  .contact-body{grid-template-columns:minmax(0,1fr); gap:30px;}

  .colophon .shell{flex-direction:column; gap:14px;}
}