/* Landing-Page "How it works"-Section - technischer Deep-Dive direkt
   nach der KeePass-Section, fuer Besucher die schon so weit gescrollt
   sind und mehr Tiefe wollen (self-hosted Relay-Server, .kdbx-Add-on).
   Namespace: .landing-page__architecture-* */

.landing-page__architecture-section{
  max-width:1280px !important;
  margin:0 auto !important;
  padding:8px 48px 64px;
  font-family:'Open Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  box-sizing:border-box;
}
.landing-page__architecture-section,
.landing-page__architecture-section *{
  box-sizing:border-box;
  font-family:'Open Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

.landing-page__architecture-header{
  text-align:center;
  max-width:640px;
  margin:0 auto 0px;
}
.landing-page__architecture-kicker{
  color:var(--pl-blue);
  font-weight:700;
  font-size:13px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-bottom:10px;
}
.landing-page__architecture-title{
  font-size:26px;
  font-weight:800;
  line-height:1.25;
  color:var(--pl-dark);
  margin:0 0 14px;
}
.landing-page__architecture-text{
  font-size:15px;
  line-height:1.65;
  color:var(--font-color);
  margin:0;
}

.landing-page__architecture-diagram{
  padding:0;
}
.landing-page__architecture-diagram img{
  display:block;
  width:90%;
  max-width:820px;
  height:auto;
  margin:0 auto;
}

.landing-page__architecture-legend{
  display:grid;
  /* Nicht gleich breite Drittel: die Spalten sind auf die tatsaechlichen
     Positionen von Handy/Server/PC im Diagramm darueber abgestimmt
     (one-pager-dataflow-v4.svg), sonst driften die zentrierten Texte
     sichtbar von den Knoten weg, die sie beschreiben. */
  grid-template-columns:1.23fr 1.35fr 1fr;
  gap:28px;
  max-width:820px;
  margin:28px auto 0;
  text-align:center;
}
.landing-page__architecture-legend-title{
  font-size:15px;
  font-weight:800;
  color:var(--pl-blue);
  margin:0 0 6px;
}
.landing-page__architecture-legend-text{
  font-size:13.5px;
  line-height:1.55;
  color:var(--font-color);
  margin:0;
}
.landing-page__architecture-legend-text code{
  background:var(--pl-light);
  border-radius:4px;
  padding:1px 5px;
  font-size:0.92em;
}

@media (max-width: 900px){
  .landing-page__architecture-legend{grid-template-columns:1fr;gap:20px;}
}