/* Landing-Page KeePass-Sync-Section (laufende Sync, KeePass bleibt Quelle)
   Namespace: .landing-page__keepass-*

   --pl-orange-accent ist EXPERIMENTELL: kraeftigeres Orange als das
   gedeckte --pl-gold aus colors.css, nur lokal in dieser Sektion als
   Test fuer den "das gibt's sonst nirgends"-Claim. Noch nicht in
   colors.css uebernommen - erst nach Freigabe global machen. */
.landing-page__keepass-section{
  --pl-orange-accent: #E8720C;
}

.landing-page__keepass-section{
  max-width:1280px !important;
  margin:0 auto !important;
  padding:8px 48px 56px;
  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__keepass-section,
.landing-page__keepass-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__keepass-card{
  display:grid;
  grid-template-columns:1fr 0.8fr;
  gap:48px;
  align-items:center;
  background:var(--pl-bg);
  border-radius:20px;
  padding:44px 48px;
}

.landing-page__keepass-kicker{
  color:var(--pl-blue);
  font-weight:700;
  font-size:13px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-bottom:10px;
}

.landing-page__keepass-title{
  font-size:26px;
  font-weight:800;
  line-height:1.25;
  color:var(--pl-dark);
  margin:0 0 14px;
}
.landing-page__keepass-title-accent{
  color:var(--pl-orange-accent);
}

.landing-page__keepass-text{
  font-size:15px;
  line-height:1.65;
  color:var(--font-color);
  margin:0 0 22px;
  max-width:480px;
}

.landing-page__keepass-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.landing-page__keepass-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:rgba(255,255,255,0.65);
  border:1px solid rgba(0,64,128,0.15);
  color:var(--pl-blue);
  font-size:12.5px;
  font-weight:700;
  padding:7px 13px;
  border-radius:999px;
}
.landing-page__keepass-badge-accent{
  background:var(--pl-orange-accent);
  border-color:var(--pl-orange-accent);
  color:#fff;
}
.landing-page__keepass-badge-icon{
  width:12px;height:13px;
  vertical-align:-1px;
  margin-right:2px;
}
.landing-page__keepass-node img{width:48px;height:48px;}

/* Diagramm: KeePass-Datei -> Sync-Pfeile -> Handy */
.landing-page__keepass-diagram{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
}

.landing-page__keepass-node{
  width:88px;
  height:88px;
  border-radius:18px;
  background:#fff;
  box-shadow:0 14px 30px -14px rgba(0,64,128,0.35);
  color:var(--pl-blue);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  flex-shrink:0;
}

.landing-page__keepass-sync{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  color:var(--pl-orange-accent);
}
.landing-page__keepass-sync img{width:30px;height:30px;animation:landing-page__keepass-spin 3.5s linear infinite;}
.landing-page__keepass-sync-label{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:var(--pl-orange-accent);
}

@keyframes landing-page__keepass-spin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

@media (max-width: 860px){
  .landing-page__keepass-card{grid-template-columns:1fr;padding:32px 28px;}
  .landing-page__keepass-diagram{margin-top:8px;}
  .landing-page__keepass-section{padding:8px 24px 40px;}
}